setTimeout与setInterval区别

最新推荐文章于 2022-05-19 10:01:33 发布

不带刺仙人球

最新推荐文章于 2022-05-19 10:01:33 发布

阅读量420

点赞数 1

文章标签： js延迟

参考Mecry的博客，网址：http://www.cnblogs.com/mercy/articles/2424882.html

function test(){
console.log("hello world!");
}

<body>
   <form action="#">
       <input type="text" value="0" name="txt1" />
       <input type="button" value="开始" name="btnStart" />
       <input type="button" value="重置" name="btnReset" />
   </form>
   <script type="text/javascript">
       console.log("秒表的工作展示：");
       //获取表单中的表单域
       var txt = document.forms[0].elements["txt1"];
       var btnStart = document.forms[0].elements["btnStart"];
       var btnReset = document.forms[0].elements["btnReset"];
       console.log(txt.value+" "+btnStart.value+" "+btnReset.value);
       //定义定时器的id
       var id;
       //每10毫秒该值增加1
       var seed = 0;
       btnStart.onclick = function() {
           //根据按钮文本来判断当前操作
           if (this.value == "开始") {
               //使按钮文本变为停止
               this.value = "停止";
               //使重置按钮不可用
               btnReset.disabled = true;
               //设置定时器，每0.01s跳一次
               id = window.setInterval(tip, 10);
           }else {
               //使按钮文本变为开始
               this.value = "开始";
               //使重置按钮可用
               btnReset.disabled = false;
               //取消定时
               window.clearInterval(id);
           }
       };
       //重置按钮
       btnReset.onclick = function() {
           seed = 0;
           txt.value=seed;
       };
       //让秒表跳一格
       function tip() {
           seed++;
           txt.value = seed / 100;
       }
   </script>
</body>