永久定时器

语法

永久定时器的语法 : setInterval() 一旦开启，永久重复执行，只能手动清除

开启方法

开启永久定时器： let timeID = setInterval( 回调函数, 时间间隔 )

手动清除定时器： clearTimeout(timeID)

应用场景示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>电商秒杀定时器案例</title>
  <style>
    span {
      display: inline-block;
      width: 30px;
      height: 30px;
      background-color: #000;
      color: #fff;
      font-size: 22px;
      text-align: center;
      line-height: 30px;
    }
  </style>
</head>

<body>
  <div>
    <span id="hour">00</span> : <span id="minute">00</span> :
    <span id="second">05</span>
  </div>

  <script>
    /* 
    开启永久定时器，间隔时间1s
      (1)获取 时h  分m  秒s 文本innerText
      (2)s--
      (3)如果 s < 0 :  s = 59 , m--
      (4)如果 m < 0 :  m = 59, h--
      (5)如果 m h s 小于10，则补0
      (6)将计算之后的h m s 重新赋值给页面元素innerText
      (7)如果 h == 0 && m == 0 && s == 0 , 则清除定时器
    */

    let timeID = setInterval(function () {
      //(1)获取 时h  分m  秒s 文本innerText
      let h = +document.querySelector('#hour').innerText
      let m = +document.querySelector('#minute').innerText
      let s = +document.querySelector('#second').innerText

      //(2)s--
      s--
      //(3)如果 s < 0 :  s = 59 , m--
      if (s < 0) {
        s = 59
        m--
      }
      //(4)如果 m < 0 :  m = 59, h--
      if (m < 0) {
        m = 59
        h--
      }
      //(5)如果 m h s 小于10，则补0
      s = s < 10 ? '0' + s : s
      m = m < 10 ? '0' + m : m
      h = h < 10 ? '0' + h : h
      //(6)将计算之后的h m s 重新赋值给页面元素innerText
      document.querySelector('#hour').innerText = h
      document.querySelector('#minute').innerText = m
      document.querySelector('#second').innerText = s
      //(7)如果 h == 0 && m == 0 && s == 0 , 则清除定时器
      if (h == 0 && m == 0 && s == 0) {
        clearInterval(timeID)
      }
    }, 1000)

  </script>

</body>

</html>

一次定时器

语法

一次定时器的语法 : setTimeout() 一旦开启，间隔时间只会执行一次，完成后自动清除。

开启方法

开启一次定时器： let timeID = setTimeout( 回调函数, 时间间隔 )

手动清除定时器： clearTimeout(timeID)

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>一次定时器案例</title>
  <style>
    img {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  </style>
</head>

<body>
  <img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="" />

  <script>
    // 3s后图片消失
    setTimeout(function () {
      document.querySelector('img').style.display = 'none'
    }, 3000)
  </script>
</body>

</html>

js之定时器的语法及应用

永久定时器

语法

开启方法

一次定时器

语法

开启方法