计时器

作者: likeli | 来源:发表于2017-09-28 20:14 被阅读0次

    今天给大家讲两个有关计时器的例子,设置计时器时,你需要根据要求来添加计时器,清除计时器,有时候可能会清除计时器清除不了,而且会造成运动越来越快,这是因为计时器不是全局变量造成的,下面举一个倒计时的例子与无缝滚动

    倒计时100秒

     <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>倒计时</title>
        <style type="text/css">
            .wrap{
                width: 300px;
                height: 150px;
                background: black;
                margin: 10px auto;
                color: white;
                text-align: center;
                padding: 30px 10px;
                box-sizing: border-box;
            }
            input{
                width: 30px;
                text-align: center;
                vertical-align: middle;
            }
            label{
                vertical-align: middle;
            }
            #btn{
                margin-top: 30px;
                width: 280px;
                height: 40px;
                line-height: 25px;
                text-align: center;
                font-size: 22px;
                background: green;
                color: white;
                border: 2px solid gray;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <input type="text" id="inp1" value="1"><label> 分钟 </label>
            <input type="text" id="inp2" value="10"><label> 秒 </label>
            <input type="button" id="btn" value="启动">
        </div>
        <script type="text/javascript">
            var btn=document.getElementById("btn");
            var inp1=document.getElementById("inp1");
            var inp2=document.getElementById("inp2");
                var c=1;
                function demo(){
                    var a=inp1.value;
                    var b=inp2.value;
                        b--;
                        if(b<0){
                            if(a==1){                   
                                a=0;
                                b=59;
                            }
                        }if(b<=0 && a<=0){                          
                                b=0;
                                a=0;                        
                        }
                        inp1.value=a;
                        inp2.value=b;
                }
                var timer=setInterval(function(){
                        },1000) 
                btn.onclick=function(){                                 
                    if(c%2==1){
                        btn.style.background="darkred";
                        btn.value="取消";
                       timer=setInterval(function(){
                        demo();
                        },1000) 
                    }           
                    if(c%2==0){
                            btn.style.background="green"
                            btn.value="启动"
                            clearInterval(timer);                   
                    }                       
                    c++;
                }
        </script>
      </body>
     </html>    
    

    上面就是100秒的倒计时,刚开始我就是没有设置全局变量而导致清除不了,现在搞定了就会发现真的好简单。

    无缝滚动

     <!DOCTYPE html><html lang="en">
          <head>
        <meta charset="UTF-8">
        <title>无缝滚动</title>
        <style type="text/css">
            * { margin: 0; padding: 0; }
            #wrap { position: relative; width: 600px; height:300px; margin: 20px auto; border: 1px #ccc solid; overflow: hidden; }
            #roll { position: absolute; left: 0; width: 9999px; overflow: hidden; }
            #roll img { float: left; width: 300px; height: 300px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="roll">
                ![](images/img01.jpg)
                ![](images/img02.jpg)
                ![](images/img03.jpg)
                ![](images/img04.jpg)
                ![](images/img01.jpg)
                ![](images/img02.jpg)
                ![](images/img03.jpg)
                ![](images/img04.jpg)
            </div>
        </div>
    </body>
    <script type="text/javascript">
            var count=0;
            var roll=document.getElementById("roll");
            var img=document.querySelectorAll("img");
            function demo(){
                count-=3;
                if(count<-1200){
                    count=0;
                }           
                roll.style.left=count+'px';
                console.log(roll.style.left)
            }
            var timer=setInterval(function(){       
                demo();
        },10)
        roll.onmouseover=function(){            
            clearInterval(timer);
        }
         roll.onmouseout=function(){
            timer=setInterval(function(){
                demo();
            },10)
    }
    </script></html>
    

    通过上面的代码就可以实现无缝滚动。

    相关文章

      网友评论

          本文标题:计时器

          本文链接:https://www.haomeiwen.com/subject/tnmvextx.html