时间-倒计时

最新推荐文章于 2024-08-04 16:33:59 发布

Anivi7

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量101

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45177189/article/details/117619482

版权

倒计时

html:

 <body>
    <h1>
      <p></p>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </h1>
    <script src="./js/index.js"></script>
  </body>

js:

let span = document.getElementsByTagName("span")
let p = document.getElementsByTagName("p")

let timer = setInterval(() => {
    let end = new Date(2022, 0, 31, 0, 0, 0) // 目标时间
    let now = new Date();// 当前时间
    let cha = (end - now) / 1000 // 时间差 毫秒转成秒
   
    let d = Math.floor(cha / 60 / 60 / 24)//天
    let h = Math.floor(cha / 60 / 60 % 24) // 时
    let m = Math.floor(cha / 60 % 60) // 分
    let s = Math.floor(cha % 60); // 秒
    
    if (d < 0 && h <0 && m < 0 && s < 0) {
        d = 0
        h = 0
        m = 0
        s = 0
        clearInterval(timer)
        span[4].innerText = "时间到 计时结束"
    }
    d = d < 10 ? "0" + d : d
    h = h < 10 ? "0" + h : h
    m = m < 10 ? "0" + m : m
    s = s < 10 ? "0" + s : s

    p[0].innerText = `距${end}还剩:`
    span[0].innerHTML = d + "天:"
    span[1].innerText = h + "时:"
    span[2].innerText = m + "分:"
    span[3].innerText = s + "秒"

}, 1000);

Anivi7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
时间-倒计时

倒计时html: <body> <h1> <p></p> <span></span> <span></span> <span></span> <span></span> <span></span> </h1> <script
复制链接

扫一扫