• JavaScript 29 计时器


     示例 1 : 

    只执行一次

    函数setTimeout(functionname, 距离开始时间毫秒数 );
    通过setTimeout在制定的毫秒数时间后,执行一次 函数functionname
    本例在3秒钟后,打印当前时间。
    解释:
    document.getElementById 获取id=time的div元素
    .innerHTML 修改该元素的内容

    <script>
      
    function printTime(){
      var d = new Date();
      var h= d.getHours();
      var m= d.getMinutes();
      var s= d.getSeconds();
      document.getElementById("time").innerHTML= h+":"+m+":"+s;
      
    }
     
    function showTimeIn3Seconds(){
       setTimeout(printTime,3000); 
    }
      
    </script>
    <div id="time"></div>
    <button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间,并且只显示一次</button>

     示例 2 : 

    不停地重复执行函数setInterval(函数名, 重复执行的时间间隔毫秒数 );
    通过setInterval重复执行同一个函数,重复的时间间隔由第二个参数指定

    <p>每隔1秒钟,打印当前时间</p>
       
    <div id="time"></div>
       
    <script>
       
    function printTime(){
      var d = new Date();
      var h= d.getHours();
      var m= d.getMinutes();
      var s= d.getSeconds();
      document.getElementById("time").innerHTML= h+":"+m+":"+s;
       
    }
       
    var t = setInterval(printTime,1000);
       
    </script>
     
    <br><br>

    示例 3 : 

    终止重复执行

    通过clearInterval终止一个不断重复的任务

    本例,当秒是5的倍数的时候,就停止执行

    <p>每隔1秒钟,打印当前时间</p>
       
    <div id="time"></div>
       
    <script>
       
    var t = setInterval(printTime,1000);
     
    function printTime(){
      var d = new Date();
      var h= d.getHours();
      var m= d.getMinutes();
      var s= d.getSeconds();
      document.getElementById("time").innerHTML= h+":"+m+":"+s;
      if(s%5==0)
         clearInterval(t);
    }
       
    </script>
    <br>

    示例 4 : 

    不要在setInterval调用的函数中使用document.write();

    注:部分浏览器,比如firefox有这个问题,其他浏览器没这个问题。

    假设setInterval调用的函数是printTime, 在printTime中调用document.write();
    只能看到一次打印时间的效果。
    这是因为document.write,会创建一个新的文档,而新的文档里,只有打印出来的时间字符串,并没有setInterval这些javascript调用,所以只会看到执行一次的效果。

    <p>每隔1秒钟,通过document.write打印当前时间</p>
     
    <script>
     
    function printTime(){
      var d = new Date();
      document.write(d.getHours());
      document.write(":");
      document.write(d.getMinutes());
      document.write(":");
      document.write(d.getSeconds());
      document.close();
    }
     
    var t = setInterval(printTime,1000);
     
    </script>

     

  • 相关阅读:
    关于python3在centOS7下源码安装的配置
    nginx服务器多虚拟主机配置
    完全数
    高精度计算组合数
    算法竞赛入门经典第六章总结
    线段树
    奶牛
    算法竞赛入门经典第五章总结
    优先队列的使用方法
    放魔法石的游戏
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/13370271.html
Copyright © 2020-2023  润新知