操作DOM节点,使用间隔执行函数(setInterval)的一个小例子

95 阅读1分钟

image.png

<!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>Document</title>
    <style>
      body {
        text-align: center;
      }
      b {
        color: orange;
      }
    </style>
  </head>
  <body>
    <img
      src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1617008568.53329550.jpg"
      alt=""
    />
    <h1>距离 小米11 ultra 开抢, 还有 <b>100</b> 秒!!!</h1>
  </body>
  <script>
    // 用间隔执行函数来执行b里面的数字
    // 当b为0的时候,h1里面的数字也发生变化
    var b = document.querySelector("b");
    var h1 = document.querySelector("h1");
    // 定义一个间隔间隔执行函数
    var count = parseInt(b.innerHTML);
    var a = setInterval(function () {
      count--;
      //   在间隔执行函数里面,把count的值,赋值给b.innerHTML
    //   也就是说,要随时更新b.innerHTML里面的值
      b.innerHTML = count;
      if (count < 100 && count > 10) {
        b.innerHTML = "0" + count;
      }
      if (count < 10) {
        b.innerHTML = "00" + count;
      }
      if (count < 0 || b.innerHTML === "000") {
        clearInterval(a);
        // 弹出已售完
        alert("对不起,已经售完o(╥﹏╥)o");
        // h1里面的文字也发生改变
        h1.innerHTML = "已经售完了o(╥﹏╥)o";
      }
    }, 100);
  </script>
</html>