案例

计算器

  var input,divs,firsValue,symbol;
        init();
        /*
        获取input和所有被点击的divs列表，并且，循环
        所有的divs元素，给每个添加点击事件，点击后执行
        clickHandler函数
        */
        function init(){
            input=document.getElementById("input");
            divs=document.getElementsByClassName("divs");
            for(var i=0;i<divs.length;i++){
                divs[i].onclick=clickHandler;
                
            }
       
        }
        /*
        当点击divs时，进入下面的函数，this就是被点击的那个div
        判断div的内容是不是数值，如果是数值，将innerHTML的内容
        传参到addNumber函数中
        */
        function clickHandler(){
        if(!isNaN(this.innerHTML)){
            //点击数字进入
            addNumber(this.innerHTML)
        }else if(this.innerHTML==="c"){
            // 点击C进入
            clearIput();

        }else if(this.innerHTML==="="){

            // 点击=进入
            calculate();
        }else{ 
            // 点击+ - * /进入  并且传入当前点击的符号
           changeSymbol(this.innerHTML);

        }

    }
      //把输入框内原本的文本内容链接传入的这个数值字符串，
      //把链接好的字符串把他们转换成数值，这样就可以去掉前面的0
    function addNumber(n){
       
        input.value=Number(input.value+n);
    }
    /*
    执行这个内容是会清除里面的内容
    */
   function clearIput(){
       input.value="0";
       Symbol="";
       firstValue="";

   }

   function  calculate(){
       
    //    console.log(firstValue,Symbol);
    //    console.log(input.value);
    //如果symbol是什么字符,根据字符完成firstValue和现在当前文本的运算
       switch(Symbol){
           case "+":
               input.value=Number(input.value)+Number(firstValue);
               break;
            case "-":
               input.value=firstValue-input.value;
               break;
             case "*":
               input.value=firstValue*input.value;
               break;
             case "/":
               input.value=firstValue/input.value;
               break;

       }

   }
   function changeSymbol(type){
       //type就是点击的符号,Input.value就是现在文本框显示数字
    //    分别把这两个内容储存在全局变量symbol和firstValue中
       Symbol=type;
       firstValue=input.value;

       input.value="0";

   }

表单框验证1224

 <input type="text" name="user"><label></label>
    <script>
        var ids;
        var input=document.querySelector("input");
        var label=document.querySelector("label");
        input.addEventListener("input",inputHandler);

        function inputHandler(e){
            if(ids) return;
            ids=setTimeout(function(){
                clearTimeout(ids);
                ids=undefined;
                if(verifyValue(input.value)){
                    label.textContent="输入正确";
                    label.className="sucess";
                }else{
                    label.textContent="输入错误";
                    label.className="error";
                }
            })
        }


        function verifyValue(str){
            // return /\d/.test(str);
            // return /^[1-9]$|^[12]\d$|^3[01]$/.test(str);//1-31
            // return /^1\d{10}$/.test(str);
            // return /^\w{1,30}\@\w{1,10}\.\w{2,4}$/.test(str);//邮箱验证
            return /^[1-9]$|^[1-9]\d$|^[1]\d\d$|^[2][0-4]\d$|^[2][5][0-5]$/.test(str)//1-255
        }

        // 1-30 字符
        // @
        // 1-10 字符
        // .
        // 2-4 字符

    </script>

菜单 1222

<script>

        // var lis=document.querySelectorAll("li");
        // for(var i=0;i<lis.length;i++){
        //     lis[i].addEventListener("click",clickHandler);
        // }


        // function clickHandler(e){
        //     if(!this.firstElementChild) return;
        //     e.stopPropagation();
        //     var ul=this.firstElementChild;
        //     if(ul.getAttribute("open")!=="true"){
        //         ul.setAttribute("open","true");
        //     }else{
        //         ul.removeAttribute("open");
        //     }
        // }


        var city=document.querySelector(".city");

        city.addEventListener("click",clickhandler);

        function clickhandler(e){
            if(e.target.nodeName!=="LI") return;
            var ul=e.target.firstElementChild;
            if(!ul) return;
            if(ul.getAttribute("open")!=="true"){
                ul.setAttribute("open","true");
            }else{
                ul.removeAttribute("open");
            }
        }
    </script>

倒计时 1217

 <script>
        var div,startBn,stopBn,date;
        var bool=false,value=0;

        init();

        /* 
            初始函数
            获取div元素，开始按钮和停止按钮
            给开始按钮增加点击事件，执行clickStartHandler函数
            给停止按钮增加点击事件，执行clickStopHandler函数
            开启setInterval，每间隔16毫秒执行show函数
        */
        function init(){
            div=document.getElementById("div1");
            startBn=document.getElementById("startBn");
            stopBn=document.getElementById("stopBn");
            startBn.onclick=clickStartHandler;
            stopBn.onclick=clickStopHandler;
            setInterval(show,1);
        }

        /* 
            当点击开始按钮时的事件处理函数
            改变这个按钮开始或者暂停的显示
            改变开关，影响时间间隔函数是否进入函数内处理内容
            点击开始时获取当期时间，用来作为显示时不断被减的时间值
            点击暂停时，不断累加本次暂停前时间差



            如果点击按钮内容是"开始",认为这个时候开始每间隔16毫秒执行show
            函数，先把按钮里面的内容修改"暂停",设置开关为true，当设置为true
            show函数，每16毫秒执行时就会判断这个开会是不是true，如果是false
            时就会跳出，不执行后面的内容
            存储当前时间
            如果点击按钮的内容不是"开始"，而是"暂停"时,这个时候，我们先把按钮
            里面的内容修改为开始，设置开关为false，这样就会影响show函数每16毫秒
            判断不在进入函数里面执行内容，
            累加当前暂停前的时间差，用于下次启动对于数据的累加
        
        
        */

        function clickStartHandler(){
            if(this.innerHTML==="开始"){
                this.innerHTML="暂停"
                bool=true;
                date=new Date();
            }else{
                this.innerHTML="开始";
                bool=false;
                value+=Date.now()-date.getTime();
            }
        }

        /* 
            点击停止按钮
            清除所有时间差
            清除div中显示归0
            将开始按钮固定内容为"开始"
            开关变为false，不再执行show里面的内容了
        
        
        */
        function clickStopHandler(){
            value=0;
            div.innerHTML="00:00:000";
            startBn.innerHTML="开始";
            bool=false;
        }

        /* 
            show函数 每间隔16毫秒执行这个函数
            如果开关是false时，不执行这个函数内容，直接跳出
            先获取到当前运行的时间差，加上以前暂停前累加的时间差
            分别计算出小时，分，秒，毫秒
            并且再div中显示
        */
        function show(){
            if(!bool) return;
            var num=(Date.now()-date.getTime())+value;
            var h=~~(num/3600/1000);
            var m=~~((num-h*3600000)/1000/60);
            var s=~~((num-h*3600000-m*60000)/1000);
            var ms=~~(num%1000);
           div.innerHTML=getNum(m)+":"+getNum(s)+":"+getNum(ms,3);
        }

        function getNum(n,m){
            if(m===undefined) m=2;
            n=String(n);
            for(var i=n.length;i<m;i++){
                n="0"+n;
            }
            return n
        }
    </script>

电梯导航 1220

 <script>
        var lis,div;
        var targetTop=0;
        var speed=0,time=10;
        init();
        /* 
            获取li和div列表，li列表需要转换为数组
            循环给每个li增加点击事件
            设置事件间隔
        
        */
        function init(){
            lis=Array.from(document.querySelectorAll("li"));
            div=document.querySelectorAll("div");
            for(var i=0;i<lis.length;i++){
                lis[i].onclick=clickHandler;
            }
            setInterval(move,16);
        }

        /* 
            time!=0跳出这个条件正在运行时，不可以点击
            获取到当前被点击的元素是数组中第几个下标，对应的div需要跳转到第几个位置
            获取这个第几个div的距离顶端的距离
            计算目标位置与当前位置的差值，除以10，分10次运行每次运行的速度
        */
        function clickHandler(){
            if(time!==10) return;
            var index=lis.indexOf(this);
            targetTop=div[index].offsetTop;
            speed=(targetTop-document.documentElement.scrollTop)/time;

        }

        /* 
            当目标位置的结果不是0时，执行move函数
            如果当前次数等于0，表示运行次数完成
            将目标位置归0，下次不进入，将当前的次数重新变为10，跳出
            如果当前次数不是0的时候，time-1，设置滚动条的位置为当前位置+speed
        
        */
        function move(){
            if(targetTop===0) return;
            if(time===0){
                targetTop=0;
                time=10;
                return;
            }
            time--;
            document.documentElement.scrollTop+=speed;
        }
    </script>

轮播图 1221

  <script>
        var imgIconList,imgList,prevImg,prevIcon;

        init();
        function init(){
            imgIconList=Array.from(document.querySelectorAll(".crousel>ul img"));
            imgList=Array.from(document.querySelectorAll(".crousel>.img-con>img"));
            for(var i=0;i<imgIconList.length;i++){
                imgIconList[i].onclick=clickhandler;
            }
            changePrev(0);
        }


        function clickhandler(){
            var index=imgIconList.indexOf(this);
            changePrev(index);
        }

        function changePrev(index){
            if(prevImg) prevImg.style.opacity=0;
            if(prevIcon) prevIcon.style.borderColor="transparent"//"#FF9D00"
            prevImg=imgList[index];
            prevIcon=imgIconList[index];
            prevImg.style.opacity=1;
            prevIcon.style.borderColor="#FF9D00";
        }


    </script>

选色块--历史记录1221

  <script>
        var prev;
        var bus=Array.from(document.querySelectorAll("button"));
        var divs=document.querySelectorAll("div");
        //替换当前状态的数据
        history.replaceState({num:0},"0");
        changePrev(0);
        for(var i=0;i<bus.length;i++){
            bus[i].onclick=clickHandler;
        }
        window.onpopstate=popStateHandler;
        function clickHandler(){
            var index=bus.indexOf(this);
            //往他的尾部添加一个状态
            history.pushState({num:index},index);
            changePrev(index);
        }

        function changePrev(index){
            if(prev){
                prev.style.display="none";
            }
            prev=divs[index];
            prev.style.display="block";
        }

        function popStateHandler(){
            //添加监听事件
            changePrev(history.state.num);
        }
    </script>

导航栏1223

<script>
        var ul,divs,div,prev;
        init();
        function init(){
            ul=document.querySelector("ul");
            divs=document.querySelectorAll(".div1")
            div=document.querySelector("ul>div");
            ul.addEventListener("mouseover",mouseoverHandler);
            movePoistion(ul.children[1]);
        }

        function mouseoverHandler(e){
            if(e.target.nodeName!=="LI") return;
            movePoistion(e.target);
        }

        function movePoistion(li){
            div.style.left=li.offsetLeft+"px";
           var index=Array.from(ul.children).slice(1).indexOf(li)
            if(prev){
                prev.style.display="none";
            }
            prev=divs[index];
            prev.style.display="block";
        }
    </script>

拖拽1223

  <script>
        // var div1=document.querySelector(".div1");
        // div1.onmousedown=function(evt){
        //     // 先按下鼠标键 针对div1按下键
        //     document.onmousemove=function(e){
        //         // 鼠标移动  针对document移动 每次移动获取当前鼠标相对视口的距离-按下瞬间时相对当前div1的左上角距离
        //         div1.style.left=e.clientX-evt.offsetX+"px";
        //         div1.style.top=e.clientY-evt.offsetY+"px";
        //     }
        //     div1.onmouseup=function(){
        //         document.onmousemove=null;
        //     }
           
        // }


        /* var x1=0,y1=0;
        var div1=document.querySelector(".div1");
        div1.addEventListener("mousedown",mousedownHandler);

        function mousedownHandler(e){
            // e.offsetX,e.offsetY
            x1=e.offsetX;
            y1=e.offsetY;
            document.addEventListener("mousemove",mousemoveHandler);
            document.addEventListener("mouseup",mouseupHandler);
        }

        function mousemoveHandler(e){
            div1.style.left=e.clientX-x1+"px";
            div1.style.top=e.clientY-y1+"px";
        }

        function mouseupHandler(e){
            document.removeEventListener("mousemove",mousemoveHandler);
            document.removeEventListener("mouseup",mouseupHandler);
        } */



        var x1=0,y1=0;
        var div1=document.querySelector(".div1");
        div1.addEventListener("mousedown",mouseHandler);


        function mouseHandler(e){
            if(e.type==="mousedown"){
                x1=e.offsetX;
                y1=e.offsetY;
                document.addEventListener("mousemove",mouseHandler);
                document.addEventListener("mouseup",mouseHandler);
            }else if(e.type==="mousemove"){ 
               div1.style.left=e.clientX-x1+"px";
                div1.style.top=e.clientY-y1+"px";
            }else if(e.type==="mouseup"){
                document.removeEventListener("mousemove",mouseHandler);
                document.removeEventListener("mouseup",mouseHandler);
            }
        }

    </script>