js倒计时-JavaScript实现倒计时

分析

1.这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）

2.三个黑色盒子里面分别存放时分秒

3.三个黑色黑子利用innerHTML放入计算的小时分钟秒数

4.第一次执行也是间隔毫秒数，因此刚刷新页面会有空白

5.最好采取封装函数的方式js倒计时，这样可以先调用一次这个函数js倒计时，防止刚开始刷新页面 有空白

代码

    
    
    
    
    
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    


    

        1
        2
        3
    
    
        var hour = document.querySelector('.hour'); // 获取小时元素
        var minute = document.querySelector('.minute'); //获取分钟元素
        var second = document.querySelector('.second'); // 获取秒元素
        var inputTime = +new Date('2020-12-3 23:00:00'); // 输入的时间
        countDown(); //为了解决刷新页面后不出现页面的倒计时
        // 开启定时器
        setInterval(countDown, 1000);
        function countDown() {
            var nowTime = +new Date(); // 获取当前时间
            var times = (inputTime - nowTime) / 1000; // 输入的时间与当前时间的时间差（秒）
            var h = parseInt(times / 60 / 60 % 24) //计算小时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 写入盒子里面
            var m = parseInt(times / 60 % 60); // 计算分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m; // 写入盒子里面
            var s = parseInt(times % 60); // 计算秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s; // 写入盒子里面
        }
    

限时特惠：本站每日持续更新海量展厅资源，一年会员只需29.9元，全站资源免费下载
站长微信：zhanting688

htebazile普通用户

收藏 海报 链接