24H免费课程咨询  TEL:13401595960   QQ:1870218756  微信:13401595960(李老师)

东方博宜

网站首页 > 软件开发资讯 > PHP开发

通过setInterval实现JavaScript计时器

2017-07-06 17:02:52 东方博宜 阅读

js的时间控制

AsetTimeout():当时间到了之后执行1

例子:定时跳转

     3秒后自动跳转到首页!

     <script type="text/javascript">

        setTimeout("location.href='http://www.baidu.com'",3000);

     </script>

 

例子:定时显示

     <script type="text/javascript">

        setTimeout("document.getElementById('p01').innerHTML='这是第一段'",3000);

        setTimeout("document.getElementById('p02').innerHTML='这是第二段'",6000);

     </script>

     <p id="p01">

    

     </p>

    

     <p id="p02">

    

     </p>

 

BsetInterval():每隔一段时间执行1

例子:倒计时后跳转

     <span id="num">3</span>秒后自动跳转到首页!

     <script type="text/javascript">

        //每隔1秒执行1

        setInterval("countNum()",1000);

       

        function countNum(){

           //获取数字的span

           var num = document.getElementById("num");

          

           //不要看到0

           if(num.innerHTML == 1){

               location.href = "http://www.baidu.com";

           }else{

               num.innerHTML = num.innerHTML - 1;

           }

        }

     </script>

 

例子:计时器

     <style type="text/css">

        body{background-color:#fff;text-align:center;padding-top:50px;}

        #Result{border:3px solid #40AA53;margin:0 auto;text-align:center;width:400px;padding:50px 0;background:#efe;}

        #ResultNum{font-size:50pt;font-family:Verdana}

        #Button{margin:50px 0 0 0;}

        #Button input{font-size:40px;padding:0 50px;}

        .btn{background-color:#40AA53;border:1px solid #40AA53;width:20%;height:60px;margin:0em auto;font-size:1em;border-radius:2.5px;-moz-border-radius:2.5px;-webkit-border-radius:2.5px;color:#FFF;}

        #jici{

           width:400px;margin:0px auto;margin-top:20px;height:200px;overflow-y:scroll;

        }

     </style>

   

    <h1 style="color:#40AA53">计时器</h1>

   

    <div id="Result" style="color:#40AA53">

        <span id="ResultNum">0</span>

    </div>

   

    <div id="Button">

        <input type='button' id="btn01" value='开始计时' onclick="start()" class="btn"/>

        <input type='button' id="btn02" value='记次' class="btn" onclick="getNo()"/>

        <input type='button' id="btn02" value='复位' class="btn" onclick="restart()"/>

    </div>

   

    <div id="jici">

      

    </div>

 

    <script type="text/javascript">

         var id;//计时器的编号

         var no = 1;//名次

         var r = false;//判断计时器是否处于计时的状态

        

         //开始计时

         function start(){

              //获取开始计时按钮

              var btn01 = document.getElementById("btn01");

            

              //判断按钮的文字,来判断我们要做的事情

              if(btn01.value == "开始计时"){

                  btn01.value = "暂停计时";

                  id = setInterval("countTime()",1000);//打开计时器,并获取计时器的编号

                  r = true;

              }else if(btn01.value == "暂停计时"){

                  btn01.value = "开始计时";

                  clearInterval(id);

                  r = false;

              }

         }

        

         //将秒数自增1

         function countTime(){

              var num = document.getElementById("ResultNum");

              num.innerHTML = parseInt(num.innerHTML) + 1;

         }

        

         //获取名次

         function getNo(){

              //如果计时器正在计时

              if(r == true){

                  //获取时间

                  var time = document.getElementById("ResultNum").innerHTML;

                  var jici = document.getElementById("jici");

                  jici.innerHTML = ("" + no + "名,时间:" + time + "~<br />") + jici.innerHTML;

                  no++;

              }else{

                  alert("请先计时,再获取名次!~");

              }

         }

        

         //复位

         function restart(){

            //停止计时器、将计时清零、将名次清除、修改按钮的文字为开始计时

            clearInterval(id);

            r = false;

            document.getElementById("ResultNum").innerHTML = 0;

            document.getElementById("btn01").value = "开始计时";

            document.getElementById("jici").innerHTML = "";

         }

    </script>

 

image.png

Powered by 东方博宜教育咨询江苏有限公司  ©2008-2017 www.czos.cn