下班倒计时改进版页面渲染

最新推荐文章于 2024-09-23 15:22:36 发布

当小怪兽遇见大白

最新推荐文章于 2024-09-23 15:22:36 发布

阅读量110

点赞数

文章标签： html css html5 javascript

本文链接：https://blog.csdn.net/qq_44540152/article/details/120436565

版权

<div class="count-box" id="count-box">

 <style>
        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        .count-box{
          width: 100%;
          display: flex;
          margin-top: 200px;
          justify-content: center;
        }
        .item{
            background-color: #333;
            color: #fff;
            padding: 30px;
            font-size: 38px;
            font-weight: bold;
            margin-right: 20px;
            border-radius: 10px;
        }
        .isEnd{
            color: red;
            font-size: 40px;
            font-weight: bold;
        }
    </style>

var countBox= document.querySelector('#count-box')
    var child = ''
    function getEndTime() {
        let s = Math.ceil((new Date(new Date().toLocaleDateString()+'/18:00').getTime() - new Date().getTime())/1000)
        let timer = setInterval(()=>{
            s--
            if(s>0) {
                loadTime(s)
                console.log(`距离下班还剩${s}秒`)
            }else {
                clearInterval(timer)
                countBox.innerHTML = '<div class="isEnd">下班啦!</div>'
                console.log(`下班啦!`)
            }

        },1000)
    }
    function loadTime(sArr) {
        child = ''
        sArr = sArr.toString().split('')
        for(let i=0;i<sArr.length;i++) {
            child  =  child +'<div class="item">'+sArr[i]+'</div>'
        }
        countBox.innerHTML = child
    }
    getEndTime()