【电商网站的倒计时】

最新推荐文章于 2022-11-18 23:30:49 发布

小阳阳i

最新推荐文章于 2022-11-18 23:30:49 发布

阅读量154

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46474841/article/details/123883050

版权

倒计时

在这里插入图片描述

知识点: 1.永久定时器 2.补0 3.文本赋值

思路: 1.获取三个span标签的文本内容定义变量接收–> 2.秒-- -->3.判断秒=0时,重新给秒赋值为59,分-- --> 4.判断分为0时,重新给分赋值为59. -->5.三元表达式,判断时分秒是否大于10,大于返回自身,小于添0 -->6.把时分秒的值重新赋给三个标签的文本!!! -->7.判断时分秒是否为0,为0结束定时器.

<script>
    /* 
    开启永久定时器，间隔时间1s
     1.获取 h m s的文本内容
     2.s--
     3.如果s<0 s=59 m--
     4.如果m<0 m=59 h--
     5.如果h<0 h=23 
     6.s m h <10 补零
     7.把s h m的值赋给s h m的文本内容
     8. s h m =0 定时器关闭
    */



    let tiemID = setInterval(function () {
      //1.获取 h m s的文本内容
      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--
      }
      console.log(s, m, h);
      //5.s m h <10 补零
      s = (s < 10 ? '0' + s : s)
      m = (m < 10 ? '0' + m : m)
      h = (h < 10 ? '0' + h : h)
      //6.把s h m的值赋给s h m的文本内容
      document.querySelector('#second').innerText = s
      document.querySelector('#minute').innerText = m
      document.querySelector('#hour').innerText = h
      //9. s h m =0 定时器关闭
      if (s == 0 && m == 0 && h == 0) {
        clearInterval(tiemID)
      }
    }, 1000)
  </script>