html 定时器-小源泉Web后端开发中JavaScript定时器和倒计时案例解读

bendan520 html

2023-08-26 0 6,757 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

小源泉Web后端开发中JavaScript定时器和倒计时案例解读

您在开发项目的过程中会遇到这样的问题吗？经常有一些定时器或者定时器功能的需求html 定时器，还有一些需要倒计时功能。针对以上问题，小源泉的Web后端讲师给大家分享了JavaScript解读定时器和倒计时案例，希望对大家的学习有所帮助。

html 定时器-小源泉Web后端开发中JavaScript定时器和倒计时案例解读

1、设置定时器

定时器适用于定期执行的任务。在BOM的Windows对象中，有两个函数用于设置定时器

setTimeout(function,delay);// 设置延时多少毫秒执行该函数, 只执行一次, 返回值是一个 id
setInterval(function,delay);// 设置间隔多少毫米一直执行该函数, 执行多次, 返回值是一个 id

两者的区别在于setTimeout方法只执行一次html 定时器，而setInterval理论上可以执行无数次直到被取消。

2、取消定时器

前面提到，当定时器开启时，会返回一个id。这个id用来区分多个开启的定时器。当我们想要取消定时器时，可以使用这两个方法。

html 定时器-小源泉Web后端开发中JavaScript定时器和倒计时案例解读

clearTimeout(id);// 取消由 setTimeout 方式开启的定时器
clearInterval(id);// 取消由 setInterval 方式开启的定时器

3、循环调用setTimeout

在使用中，可以使用setTimeout方法来实现setInterval的效果，虽然这让我想起了以前学习Android的Handler机制，发送一个延迟消息，然后再发送内容中的消息。例如：


  var t = 1;
  function time() {
    console.log(t++);
    Windows.setTimeout('time()', 1000);
  }
  Windows.setTimeout('time()', 1000);

4、倒计时案例

页面上有一个按钮，显示倒计时数字。每1秒改变一次数字，到0秒时切换到爆燃画面。

代码

<!DOCTYPE html>
  
  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </span></li><li class="L7"><span class="pln">    </span><span class="tag">
    <link rel="stylesheet" href="">
  
  
  
    
      炸弹效果
    
    <input type="button" value="5" />
    
     src="warn.jpg" />
  
  
    // 定时执行
    function time() {
      var input = document.getElementsByTagName('input')[0]; // 获取按钮中的数字
      var time = parseInt(input.value) - 1;
      input.value = time;
      // 爆炸操作
      if (time <= 0) {
        var img = document.getElementsByTagName('img')[0];
        img.src = 'boom.jpg'; // 切换爆照图片
        clearInterval(t1); // 清除定时器
      }
    }
    var t1 = Windows.setInterval('time()', 1000); // 开启定时器