定时器的使用场景

最新推荐文章于 2024-03-21 17:44:21 发布

执笔流年233

最新推荐文章于 2024-03-21 17:44:21 发布

阅读量659

点赞数

文章标签： css3 html css

本文链接：https://blog.csdn.net/weixin_69356624/article/details/124617884

版权

场景一:

永久定时器(间歇定时器)之电商秒杀

实现思路:

开启永久定时器,间隔时间1S

获取时 h 分m 秒s 文本innerText
s- -
如果 s < 0 : s = 59 , m- -
如果 m < 0 : m = 59 , h- -
如果 m h s 小于10, 则补0
将计算之后的h m s 重新赋值给页面元素 innerText
如果 h == 0 && m==0 s ==0 ,则清除定时器

那么让我们开始吧~

在这里插入图片描述

<!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>Document</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>

场景二:

一次性定时器(延时定时器)之几秒后广告消失

实现思路:

添加广告到指定位置
设置一次性定时器
到时间给广告设置隐藏

<!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>
      img {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    </style>
  </head>

  <body>
    <img src="./images/ad.png" alt="" />
    
    <script>
        // 3s关闭广告
        setTimeout(function(){
          document.querySelector('img').style.display = 'none'
        },3000)
    </script>
  </body>
</html>

执笔流年233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定时器的使用场景

场景一:永久定时器(间歇定时器)之电商秒杀实现思路:开启永久定时器,间隔时间1S获取时 h 分m 秒s 文本innerTexts- -如果 s < 0 : s = 59 , m- -如果 m < 0 : m = 59 , h- -如果 m h s 小于10, 则补0将计算之后的h m s 重新赋值给页面元素 innerText如果 h == 0 && m==0 s ==0 ,则清除定时器那么让我们开始吧~<!DOCTYPE html>
复制链接

扫一扫