采蜜蜂的小冬菇
采蜜蜂的小冬菇

普通轮播图制作

制作思路：

需要一个banner图自动轮流播放图片，下方的小按钮也要跟着轮播图动，然后鼠标进入图片框的时候图片就会暂停播放，鼠标离开就会继续播放。

要用到的知识：

  • appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
  • cloneNode() 方法可创建指定的节点的精确拷贝。若为itm=cloneNode(true);则将对象复制一份给
    itm，若为false，复制一个空的对象给itm。
  • document.createElement(nodename)创建一个元素。
  • createTextNode() 创建一个文本节点元素。
  • setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。会不停地调用函数，直到 clearInterval()
    被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval()
    方法的参数。如果你只想执行一次可以使用 setTimeout() 方法。 语法： setInterval(code,
    milliseconds); setInterval(function, milliseconds, param1, param2,
    …) 参数 描述 code/function 必需。要调用一个代码串，也可以是一个函数。
    milliseconds 必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。 param1, param2,
    … 可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

代码：


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        *{margin:0;padding:0;}

        /*轮播图*/
        .banner{width:500px;height:250px;margin:50px auto;border:1px solid #bbbbbb;overflow: hidden;}
        ul{width:2500px;height:250px;position:relative;}
        .ulan{transform:translatex(0px);transition: transform .5s ease-in-out;}
        ul>li{width:500px;height:250px;list-style: none;float: left;}
        ul>li>img{width:500px;height:250px;}

        /*轮播小红点*/
        #btn{position:relative;left:50%;margin-left:-40px;bottom:20px;}
        #btn>li{border:1px solid #FFFFFF;width:8px;height:8px;border-radius:50%;float:left;margin-right:8px;}
        .check{background-color:#f10215;}
    style>
head>
<body>
<div class="banner">
    <ul id="lunbotu" class="ulan">
        <li><img src="./image/3.jpg" alt=""/>li>
        <li><img src="./image/2.jpg" alt=""/>li>
        <li><img src="./image/5.jpg" alt=""/>li>
        <li><img src="./image/1.jpg" alt=""/>li>
        <li><img src="./image/4.jpg" alt=""/>li>
    ul>
    <ul id="btn">
        <li class="check">li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ul>
div>
<script>
    var time=null;
    var allpage=5;
    var ulan=document.getElementsByClassName("ulan");
    var speed=1500;
    var count=0;/*记录当前图片*/
    var ulele=document.querySelector("#lunbotu");
    var btnturn=document.querySelector("#btn");
    var nowpage=0;


    /*复制ul的第一个元素加在ul之后，帮助自然切换*/
    ulele.appendChild(ulele.children[0].cloneNode(true));
    ulele.style.width=ulele.children.length*500+"px";

    //定义轮播动画
    function lunbo(){
        //判断是否具有过渡类，没有就添加
        if(!ulele.classList.contains("ulan")){
            ulele.classList.add("ulan");
        }
        count++;
        ulele.style.transform="translatex("+(-count*500)+"px)";
        nowpage=count;
        timer();
        btnColor();

    }
    allan();
    function allan(){
        time=setInterval(function(){
            lunbo();
        },speed)
    }


    //鼠标进入图片暂停
    ulan.onmouseenter=function(){
        clearInterval(time);
        console.log(1);
    }
    ulan.onmouseleave=function(){
        allan();
    }

    //设置循环计时器
    function timer(){
        setTimeout(function(){
            if(count>=ulele.children.length-1){
                //到达最后一张图时，将数据清零，重新进行循环
                count=0;
                //移除类
                ulele.classList.remove("ulan");
                ulele.style.transform = "translatex(0px)";
            }
        },500)
    }

    //定义轮播小按钮
    function btnColor(){
        if (nowpage>=1&&nowpage<allpage){
            btnturn.children[nowpage-1].classList.remove("check");
            btnturn.children[nowpage].classList.add("check");
        }
        else {
            nowpage=0;
            btnturn.children[allpage-nowpage-1].classList.remove("check");
            btnturn.children[nowpage].classList.add("check");
        }
    }

    /*定义一个计时器实现图片轮播*/


script>
body>
html>

心得：

现在自己最大的问题就还是基础知识不牢靠，做起来异常非常的慢，本次耗费最长时间的是轮播图动画尾页与第一页切换问题，以后多看。

待解决问题：

1、点击下方小btn的时候，图片切换到相对应的页数。
2、鼠标进入banner图的时候，动画未发生暂停。

你可能感兴趣的:(小案例)

  • Linux xargs命令 fengyehongWorld Linuxlinux
    参考资料阮一峰-xargs命令教程xargsコマンド目录一.作用二.基本语法2.1-d指定分隔符2.2-p与-t选项2.3-L指定多少行作为一个命令行参数2.4-n指定将多少项作为参数2.5-I指定命令行参数占位符2.6--max-procs指定并行进程的数量三.小案例3.1文件删除3.2文件打包3.3文件移动3.4其他命令结合复杂用法一.作用⏹作用于不接收管道传参的命令，使其接受管道传来的标准输
  • 前端练习小项目——视觉冲击卡片 秋刀鱼不做梦 CSS前端学习htmlcsscss3vscode
    前言：前言：在学习完HTML和CSS之后，我们就可以开始做一些小项目了，本篇文章所讲的小项目为——视觉冲击卡片✨✨✨这里是秋刀鱼不做梦的BLOG✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客先让我们看一下效果：那么我们如何去实现这样的小案例呢？在下文中我们对每一段重要的代码都进行了解释，读者可以根据注释对代码进行理解。1.HTML代码zjy这段HTML代码是一个基本的网页模板，展
  • canvas计时小案例 哈哈乐乐WXT
    前段时间看到某QQ群里有问这个效果怎么写，一时兴趣也研究了一下，写个小例子；效果基本实现了，代码也不是很完善，如实际操作还需更改；留着以后备用。效果图1.gifcss代码div{margin:0auto;margin-top:100px;background:#eee;width:500px;height:500px;text-align:center}canvas{margin:0auto;ma
  • 设计模式学习-简单的命令模式例子 一个不会码代码的小恐龙 设计模式学习命令模式unity
    上一章节介绍过了命令模式，这一篇文章就简单的做一个小案例来巩固学习搭建场景简单的搭建一个场景就行，随便准备一个物体放在场景中位置Reset一下即可。代码编写定义接口（或者抽象类）ICommand用来规范Command的行为。注意在命令模式中命令是桥接作用负责接受者和执行者之间的联调。所以一般会有很多的命令，每个命令都会有ICommand规范的方法同时也可以添加其他的方法。publicinterfa
  • 人定方能胜天 风追蓝天见海洋
    图片发自App书里讲到一个小案例很有趣，就是说，当供应18,000元和38,000元羽绒被的时候，38,000的高级羽绒被几乎无人问津。但是当推出了58,000的特级羽绒被之后，反而38,000的羽绒被销量一跃排到了第1位。这是因为，一开始只有两款产品的时候，顾客难以察觉38,000产品的价值，相比品质会更加关注价格便宜的产品。但如果有了三件产品，顾客就会进行挑选，在品质和价格之间作出选择，最后反
  • 云上运维案例分享 LinkSLA 云计算1024程序员节
    一、背景当下，越来越多的企业选择业务数据上云。不可否认数据上云后，增强了扩展的便利性，但是同时也提高了运维管理的难度。如何实现云上业务管理，是运维工程师们面临的新问题。LinkSLA智能运维管家，不仅提供私有云的运维管理，同时为公有云上业务系统提供了统一运维平台。方便IT运维工程师实时掌握公有云上系统的运行状况。二、案例下面我给大家分享一个云上运维监控的小案例：1、夜间重启在5月底，某三甲医院接入
  • django学习入门系列之第四点《javascript初了解》 铁匠匠匠 djangodjango学习javascript笔记开源python前端框架
    文章目录往期回顾javascript是一门编程语言，浏览器就是相当于这门语言的解释性DOM和BOM相当于这门语言内置的模块例如:Python的random，json模块JQuery可以理解为编程语言的第三方模块例如:openpyxl，requestsjavascript意义让程序实现一些动态的效果小案例Title.menus{width:200px;border:1pxsolidred;}.men
  • 情绪管理的修行之路第11篇 張濤
    情绪管理的修行之路（学习笔记第11篇）2021.1.16继续学习清华大学心理学系彭凯平教授的情绪管理课程，今天咱们探讨一下害羞和羞怯的情绪体验。【篇首语】：各位书友晚上好，在分享今天读后感之前先和大家分享一个小案例，相信对孩子是幼儿园和小学的家长朋友能有点提示。当我孩子进入初中阶段开始学习时，我请教过她一个问题，我是这样问的：你们班现在参加学校活动的主持人有没有新的面孔，她的回答让我陷入沉思！她说
  • 兰德系数（Rand Index） J@u1 日常心得（小笔记）图像分割聚类指标评价系数
    NOTE：1、一个小案例说明兰德系数是如何怎么计算的。很详细！2、关于兰德系数的讨论：https://stats.stackexchange.com/questions/89030/rand-index-calculation注意：+--------------------------------+--------------------------------------+|TP:|FN:||S
  • JavaScript设计模式：十、适配器模式 流水吾情 javascript设计模式适配器模式
    十、适配器模式一、概述适配器模式是设计模式行为型模式中的一种模式；定义：适配器用来解决两个已有接口之间不匹配的问题，它并不需要考虑接口是如何实现，也不用考虑将来该如何修改；适配器不需要修改已有接口，就可以使他们协同工作；1.最小案例vargoogleMap={show:function(){console.log('开始渲染谷歌地图');}};varbaiduMap={display:functi
  • Spring Security 可以同时对接多个用户表？ _江南一点雨
    @[toc]这个问题也是来自小伙伴的提问：image其实这个问题有好几位小伙伴问过我，但是这个需求比较冷门，我一直没写文章。其实只要看懂了松哥前面的文章，这个需求是可以做出来的。因为一个核心点就是ProviderManager，搞懂了这个，其他的就很容易了。今天松哥花一点时间，来和大家分析一下这个问题的核心，同时通过一个小小案例来演示一下如何同时连接多个数据源。1.原理1.1Authenticat
  • 详解Springboot整合Shiro加盐加散列实现登陆注册小案例 鱼小洲 技术杂谈shiromybatishashspringbootboot-shiro
    前言Springboot和Shiro的基本介绍我就不多说了，能看到这篇文章的相信也都会用。这篇文章主要是分享一下我在学习Shiro和Springboot的整合的小阶段。目前是复习，很感谢B站的up主——编程不良人的视频让我有了一个学习Shiro的基本方向。目前是实现了用户认证的功能。依赖整合的时候使用的是jsp，其实和thymeleaf一个道理，而且不涉及到作用域传值。我们需要导入的依赖有：mys
  • 详解Vue文件结构+实现一个简单案例 小馒头学python Vue3vue.js前端javascriptvue
    欢迎来到我的博客，你将找到有关如何使用技术解决问题的文章，也会找到某个技术的学习路线。无论你是何种职业，我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章，也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临，让我们一起踏上这个知识之旅！文章目录文件结构小案例总结文件结构├──public/#公共资源目录│├──index.html
  • 一个小例子，告诉你什么是衍生式设计 九哥BIMer Dynamo案例百解Dynamopython衍生式设计
    之前好多小伙伴想让我介绍介绍Dynamo与衍生式设计，奈何最近太忙了，实在没时间弄这些~趁着端午节，今天用一个小案例，先简单让大家对衍生式设计有个初步认识，之后有时间，我再多写几篇关于这方面的文章，好了，接下来进入正题：一、计算设计在了解衍生式设计之前，先来了解下什么是计算设计。计算设计不是任何一种你可以应用的算法或现成的过程。相反，我们将其描述为一种方法，设计师通过定义一系列指令、规则和关系，精
  • 鸿蒙小案例-你画我猜 幻凡ss harmonyosharmonyos华为
    鸿蒙小案例-你画我猜1.准备组件(组件布局)2.实现跟随鼠标画笔画出图案功能3.实现复制上面的画笔的图案功能4.其他小功能1.组件的准备画布的组件官方给的API是Canvas，需要传递一个参数CanvasRenderingContext2D直接搜索API使用官方案例privatesettings:RenderingContextSettings=newRenderingContextSetting
  • 守护成长感恩六月第一天 杨倩Grace
    ❤️感恩日记1．感恩经历了❤️10场小读者演讲沙龙❤️孩子们在台上的演讲从扭捏到敢于上台，这是一个大大的突破。‍♀️平日侃侃而谈的女孩，比赛台上也会脸红心跳加速；平时调皮捣蛋的男孩子们面对即兴演讲时，思路敏捷，沉着应对，生活小案例频频抖出，令到演讲生动风趣；❤️第一次站在这个演讲舞台的8岁女孩子，虽然紧张得不得了，还是积极准备，跃跃欲试，丰富的阅读底蕴，梦想当作家她更让家长和我们感悟到爱阅读的孩子
  • VueRouter：初识路由、声明式导航、重定向和别名、404设置、模式修改（HTML5 History 模式）、编程式导航、嵌套路由、导航守卫、路由元信息、导航高亮 小白小白从不日白 vuevue.js
    目录一、初识路由1.1什么是Vue-Router1.2什么单页面应用1.3Vue-Router的使用步骤1.4什么是router-link？1.5创建路由的几种方式1.6组件可以分为哪两类1.7路由综合小案例二、声明式导航2.1声明式导航基础使用2.2声明式导航跳转传值三、重定向和别名3.1重定向3.2给路由起别名四、路由404设置五、模式修改（History模式）六、编程式导航6.1编程式导航基
  • 新手入门------SpringBoot文件上传实现 布吉岛- 入门SpringBootspringbootjavaidea
    本次的内容是实现文件上传，小案例要达到的效果是在浏览器选择好文件，然后上传，最后返回结果（失败或成功），分为单文件和多文件上传。一.案例准备首先还是进行springboot项目的创建，这个就不进行演示了。本次需要添加的依赖是springweb和thymeleaf。如果已经有项目但是没有选择这两个依赖，可以点击pom.xml，在中手动添加如下依赖：org.springframework.bootsp
  • 快速入门------SpringBoot整合MVC（2） 布吉岛- 入门SpringBootspringboot后端javamvc
    在上一篇SpringBoot入门学习（1）中我们简单实现了用户数据的查询并且在浏览器页面显示json数据，那么这篇我们将介绍SpringBoot整合MVC的一个小案例。一.简单介绍和项目准备springmvc属于web层的开发技术，它是一个轻量级web框架。详细概念请自行查找，文章重点放在了小案例中。首先是项目的创建，和之前的方式一样，不同的是要新增加两个依赖。如果你创建时没有选则依赖，可以自行手
  • React Hooks：useState、useEffect和useContext Windy_Coding Reactreact.js
    目录1.useState-让函数组件具有维持状态的能力1.1语法1.2应用2.useEffect-执行副作用2.1语法2.2应用2.3关于依赖项2.4小案例
  • Go - atomic包使用及atomic.Value源码分析 Java天天
    1.Go中的原子操作原子性：一个或多个操作在CPU的执行过程中不被中断的特性，称为原子性。这些操作对外表现成一个不可分割的整体，他们要么都执行，要么都不执行，外界不会看到他们只执行到一半的状态。原子操作：进行过程中不能被中断的操作，原子操作由底层硬件支持，而锁则是由操作系统提供的API实现，若实现相同的功能，前者通常会更有效率最小案例：packagemainimport("sync""fmt")v
  • JavaSE——流程控制-循环结构（for循环、while循环、小案例、do-while循环、死循环、循环嵌套） qiyi.sky JavaSEjava开发语言学习笔记
    目录for循环while循环小案例do-while循环死循环循环嵌套for循环for(inti=0;i<5;i++){System.out.println("Helloworld");}执行的流程：循环一开始，执行inti=0一次。此时i=0，接着计算机执行循环条件语句：0<3返回true，计算机就进到循环体中执行，输出：helloWorld，然后执行选代语句i++。此时i=1，接着计算机执行循环
  • JavaSE——流程控制-跳转关键字(break、continue)，小案例（随机数、猜数字） qiyi.sky JavaSEjavaintellij-idea学习笔记
    目录跳转关键字小案例（随机数）Random猜数字跳转关键字break：跳出并结束当前所在循环的执行。continue：用于跳出当前循环的当次执行，直接进入循环的下一次执行。注意事项：break：只能用于结束所在循环，或者结束所在switch分支的执行。continue：只能在循环中进行使用。小案例（随机数）RandomRandom作用：生成随机数。//第一步，导包importjava.util.R
  • Python3中使用的socks5代理账号密码不能包含#*等字符原因是什么，怎么解决 NestBrowser 小案例pythonubuntu
    小案例系列之：python3的requests库socks5代理账号密码为什么不支持#等字符前段时间遇到一个朋友说：测试个socks5账号居然出现神奇的现象，参数设置进去以后抛出异常网络不可达。再跟进去一点，发现参数居然只返回的部分，甚至服务器地址都没有返回。后面各种测试发现只要账号密码包含#号，就会出现这个问题。这个没理由的，socks5协议中没有要求账号密码不能包含#号，一定是python3的
  • CSS基础 2301_81054073 css前端
    CSS：层叠样式表作用：给页面中HTML标签设置样式CSS引入式内嵌式：css写在style标签中外联式：css写在一个单独的css文件中通过link标签在网页中引入行内式：css写在标签的style属性中三种引入方式的区别：引入方式书写位置作用范围使用场景内嵌式css写在style标签中当前页面小案例外联式css写在一个单独的css文件中通过link标签在网页中引入多个页面项目中行内式css写在
  • Session和Cookie总结 末日携手的半阳
    小案例统计当前页面的第几个访问者注意事项1，防止线程安全问题2.使用同步代码块选择锁对象，通常会使用当前servlet对象ServletConfig对象作用：在xml文件中存放初始化数据，在tomcat启动时就加载在web.xml文件中利用init-param标签来定义servlet初始化参数，包含两个子标签param-name和value，是一个键值对形式执行流程当Tomcat启动时，WEB容器
  • 面向对象小案例 李烁_e500
    1.往房子里放家具的小案例classHourse:def__init__(self,name,mianji):self.name=nameself.mianji=mianjidef__str__(self):return'家具是%s,面积是%.2f'%(self.name,self.mianji)bed=Hourse('床',10)computer=Hourse('电脑',15)classHuxi
  • 2019-04-09 史风梅凉州区金沙镇九年制学校
    最美人间四月天，村小写作大文章！4月9日教育部发布《2018年中国互联网学习白皮书》，互加计划和青椒计划作为年度优秀案例入选，同日《全国首届“互联网+美丽乡村优秀村小案例评比”》成果揭晓，恭喜您的论文入选并获得三等奖，一同书写最美村小春天！入选详情请点击https://mp.weixin.qq.com/s/WUmLXH3SCnB369RYZ7n27g
  • 反脆弱2 郑汇
    生活中的小案例：比如阅读演讲这件事，十几年前，想读书但没时间。然而现在各种资源和合。自己开始运营读书平台。
  • HTML小案例 满分观测网友z HTML学习html前端
    HTML小案例我们这里简单做一个百度百科的界面，涉及我们学到的文本、图片、列表、表格标签，超链接等等知识，也可以换成自己喜欢的做。穿越火线li{/*去掉列表前面的小黑点*/list-style:none;}table{/*100%内容撑满整个屏幕*/width:100%;/*文字居中*/text-align:center;}穿越火线游戏简介背景设定角色设定武器装备游戏评测  《
  • Linux的Initrd机制 被触发 linux
    Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin
  • maven本地仓库路径修改 bitcarter maven
    默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法：     1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml     2.找到        
  • XSD和XML中的命名空间 darrenzhu xmlxsdschemanamespace命名空间
    http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn
  • Java 求素数运算 周凡杨 java算法素数
    网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。 第一种：   原理: 6N(+-)1法         任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…)   
  • java 单例模式 g21121 java
    想必单例模式大家都不会陌生，有如下两种方式来实现单例模式：   class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }
  • Linux下Mysql源码安装 510888780 mysql
    1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录       解压缩下载的源码包，目录结构，特殊指定的目录除外：           
  • 32位和64位操作系统 墙头上一根草 32位和64位操作系统
    32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了
  • 我的spring学习笔记10-轻量级_Spring框架 aijuans Spring 3
    一、问题提问：     → 请简单介绍一下什么是轻量级？     轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。  
  • mongodb 环境搭建及简单CURD antlove WebInstallcurdNoSQLmongo
    一 搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\
  • 数据字典和动态视图 百合不是茶 oracle数据字典动态视图系统和对象权限
    数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭   数据字典中包含   数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一
  • 多线程编程一般规则 bijian1013 javathread多线程java多线程
           如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。        不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。
  • 将文件或目录拷贝到另一个Linux系统的命令scp bijian1013 linuxunixscp
    一.功能说明        scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下：        scp 远程用户名@IP地址：文件的绝对路径
  • 【持久化框架MyBatis3五】MyBatis3一对多关联查询 bit1129 Mybatis3
    以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。   示例数据：   地址表：   CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR
  • cookie状态判断引发的查找问题 bitcarter formcgi
    先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题） 问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没
  • 通过Nginx,Tomcat访问日志(access log)记录请求耗时 ronin47
    一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r
  • java-67- n个骰子的点数。 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 bylijinnan java
    public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati
  • 看别人的博客，觉得心情很好 Cb123456 博客心情
       以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客:    职业规划:    http://www.iteye.com/blogs/subjects/zhiyeguihua      android学习:    1.http://byandby.i
  • [JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析 comsci 工作流
        我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误      在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到
  • JS常用的事件及方法 cwqcwqmax9 js
    事件 描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即
  • 正则表达式验证日期格式 dashuaifu 正则表达式IT其它java其它
    正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu
  • Yii CModel.rules() 方法 、validate预定义完整列表、以及说说验证 dcj3sjt126com yii
    public array rules () {return} array 要调用 validate() 时应用的有效性规则。 返回属性的有效性规则。声明验证规则，应重写此方法。 每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation
  • UITextAttributeTextColor = deprecated in iOS 7.0 dcj3sjt126com ios
    In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins
  • 判断一个数是质数的几种方法 EmmaZhao Mathpython
    质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。 判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以
  • SpringSecurity工作原理小解读 坏我一锅粥 SpringSecurity
      SecurityContextPersistenceFilter   ConcurrentSessionFilter   WebAsyncManagerIntegrationFilter   HeaderWriterFilter   CsrfFilter   LogoutFilter   Use
  • JS实现自适应宽度的Tag切换 ini JavaScripthtmlWebcsshtml5
    效果体验：http://hovertree.com/texiao/js/3.htm   该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
  • Hbase Rest API : 数据查询 kane_xie RESThbase
    hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。   启动命令：./bin/hbase rest s
  • JQuery实现鼠标拖动元素移动位置（源码+注释） 明子健 jqueryjs源码拖动鼠标
    欢迎讨论指正！   print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l
  • Postgresql 连表更新字段语法 update qifeifei PostgreSQL
    下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1.
  • 将redis,memcache结合使用的方案? tcrct rediscache
    公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi
  • 开发中遇到的诡异的bug wudixiaotie bug
    今天我们服务器组遇到个问题： 我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他