html倒计时

最新推荐文章于 2024-04-09 14:07:34 发布

云只上

最新推荐文章于 2024-04-09 14:07:34 发布

阅读量219

点赞数

文章标签： html javascript 前端 css json

本文链接：https://blog.csdn.net/m0_47483157/article/details/130158033

版权

<!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>
        .box{
          height: 500px;
            border: 1px solid red;
            overflow: hidden;
           
        }
      .boxList{
        font-size: 100px;
        text-align: center;
        line-height: 500px;
      }

       
    </style>
</head>
<body>
    <div class="box" id="box">
        <div id="boxList" class="boxList">
            
        </div>
     
    </div>
    <script>
        setInterval(()=>{
            let time = parseInt(new Date("2023-4-14 17:30:00").getTime()/1000) - parseInt(new Date().getTime()/1000)
     
            let h = parseInt(time / 60 / 60 % 24)
            let m = parseInt(time / 60 % 60)
            let s = parseInt(time % 60)

            boxList.innerHTML = '剩余'+ (h < 10 ? '0' + h : h)+'时'+  (m < 10 ? '0' + m : m) +'分'+ (s < 10 ? '0' + s : s) + '秒' + '下班'

        },1000)
        var  box = document.getElementById('box')
        var  boxList = document.getElementById('boxList')
       
    </script>
</body>
</html>