zoukankan      html  css  js  c++  java
  • 智能社Js笔记——定时器的使用

     
    写JS代码,首先确定写的JS能够完成功能,并且没有任何bug,然后再做的事情就是把代码里面相似的东西进行合并,代码优化;
     
    1、定时器的作用
    开启定时器
    setInterval(function (){} , 1000) 间隔型
    setTimeOut (function (){}, 1000)  延时型
    两种定时器的区别
     
    停止定时器
    clearInterval(timer);
    clearTimeout(timer);
     
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>开启关闭定时器</title>
    </head>
    <script type="text/javascript">
        window.onload=function (){
            var oBtn1=document.getElementById("btn1");
            var oBtn2=document.getElementById("btn2");
            var timer=null;
            oBtn1.onclick=function (){
                timer=setTimeout(function (){
                    alert("a");
                }, 1000);
     
                // timer=setInterval(function (){
                //     alert("a");
                // }, 1000);
            };
            oBtn2.onclick=function (){
                clearTimeout(timer);
                //clearInterval(timer);
            };
        };
    </script>
    <body>
        <input id="btn1" type="button" value="开启" />
        <input id="btn2" type="button" value="关闭" />
    </body>
    </html>
     
     
     
    2、数码时钟
    如何用JS获取到当前时间
    var oDate=new Date();
    oDate.getHours();
    oDate.getMinutes();
    oDate.getSeconds(); 
     
    显示系统时间(用一个toDou()函数来实现)
    字符串连接
    空位补零
     
    设置图片路径
    charAt方法
    str[0]在低版本下不兼容
    此时要用charAt(0) 获取字符串下某一位的东西
     
    整个时间中只有月有问题
    年:getFullYear()
    月:getMonth()+1
    日:getDate()
     
    星期:getDay()    //星期天是0,以此类推 
     
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数码时钟</title>
        <style type="text/css">
            div{ 25px; height: 25px; line-height: 25px; font-size: 20px; text-align: center; background: black; color: #eee; margin: 5px; float: left; }
        </style>
        <script type="text/javascript">
            function toDou(n){
                    if(n<10){
                        return "0"+n;
                    }else{
                        return ""+n;
                    }
                };
     
            window.onload=function (){
     
                function tick(){
                        var aDiv=document.getElementsByTagName("div");
                        var oDate=new Date();
                        var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
                        // alert(str);
                        for(var i=0; i<aDiv.length; i++){
                            aDiv[i].innerHTML=str[i];
                        }
                };
                setInterval(tick, 1000);
                tick();
     
            };
        </script>
    </head>
    <body>
        <div>1</div>
        <div>6</div>
        <div>1</div>
        <div>4</div>
        <div>2</div>
        <div>0</div>
    </body>
    </html>
     
    3、延时提示框(要搞清楚事件发生的过程)
    原来的方法:移入显示,移出隐藏
    移出延时隐藏:移入下面的div后还是隐藏了
    简化代码:合并两个相同的mouseover和mouseout
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>延时提示框</title>
        <style type="text/css">
            div{float: left; margin: 10px;}
            #div1{ 50px; height: 50px; }
            #div2{ 150px; height: 150px; background-color: #ccc; display: none;}
        </style>
        <script type="text/javascript">
            window.onload=function (){
                var oDiv1=document.getElementById("div1");
                var oDiv2=document.getElementById("div2");
                var timer=null;
     
                oDiv1.onmouseover=function (){
                    clearTimeout(timer);
                    oDiv2.style.display="block";
                };
     
                oDiv1.onmouseout=function (){
                    timer=setTimeout(function (){
                        oDiv2.style.display="none";
                    }, 500);
                };
     
                oDiv2.onmouseover=function (){
                    clearTimeout(timer);
                };
     
                oDiv2.onmouseout=function (){
     
                    timer=setTimeout(function (){
                        oDiv2.style.display="none";
                    },500);
                };
     
     
                    //优化,相同的函数代码合并
            //     oDiv1.onmouseover=oDiv2.onmouseover=function (){
            //         clearTimeout(timer);
            //         oDiv2.style.display="block";
            //     };
     
            //     oDiv1.onmouseout=oDiv2.onmouseout=function (){
            //         timer=setTimeout(function (){
            //             oDiv2.style.display="none";
            //         },500);
            //     };
             };
        </script>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
    </html>
     
     
     
    4、无缝滚动
    offsetLeft、offsetTop、offsetHeight、offsetWidth在运动的时候用来获取物体的位置;
    运动的div首先要给它一个绝对定位 position:absolute; top: 50px; left:100px;
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>无缝滚动</title>
        <style type="text/css">
            *{margin: 0; padding: 0;}
            #div1{ 712px; height: 118px; margin: 100px auto; position: relative; background: red;
                overflow: hidden;}
            #div1 ul{position: absolute; left: 0; top: 0;}
            #div1 ul li{ 178px; height: 118px; float: left; list-style: none;}
        </style>
        <script type="text/javascript">
            window.onload=function (){
                var oDiv=document.getElementById("div1");
                var oUl=oDiv.getElementsByTagName("ul")[0];
                oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
                var aLi=oUl.getElementsByTagName("li");
                oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";
                var speed=-2;
                document.getElementsByTagName("a")[0].onclick=function (){
                    speed=-2;
                };
                document.getElementsByTagName("a")[1].onclick=function (){
                    speed=2;
                };
     
     
                function move(){
                    if(oUl.offsetLeft<-oUl.offsetWidth/2){
                        oUl.style.left=0;
                    }
                    if(oUl.offsetLeft>0){
                        oUl.style.left=-oUl.offsetWidth/2+"px";
                    }
                    oUl.style.left=oUl.offsetLeft+speed+"px";
                }
                timer=setInterval(move,30);
     
                oDiv.onmouseover=function (){
                    clearInterval(timer);
                };
                oDiv.onmouseout=function (){
                    timer=setInterval(move,30);
                };
     
     
            };
     
        </script>
    </head>
    <body>
        <a href="javascrip:;">向左走</a>
        <a href="javascrip:;">向右走</a>
        <div id="div1">
            <ul>
                <li><img src="images/1.jpg" /></li>
                <li><img src="images/2.jpg" /></li>
                <li><img src="images/3.jpg" /></li>
                <li><img src="images/4.jpg" /></li>
            </ul>
        </div>
    </body>
    </html>
     
  • 相关阅读:
    centos 用户管理
    rsync 实验
    文件共享和传输
    PAT 1109 Group Photo
    PAT 1108 Finding Average
    PAT 1107 Social Clusters
    PAT 1106 Lowest Price in Supply Chain
    PAT 1105 Spiral Matrix
    PAT 1104 Sum of Number Segments
    PAT 1103 Integer Factorization
  • 原文地址:https://www.cnblogs.com/Marilyn-xml/p/5224632.html
Copyright © 2011-2022 走看看