京东倒计时案例

这个案例是各种网页中都算是比较常见的了,话不多说开始做吧.

1.css结构

css结构只需要准备三个盒子用来放内容就可以了.

//css样式
<style>
#hour,#minute,#second{
    width:100px;
    height:100px;
    float:left;
}
</style>
//html页面结构
<div id='time'>
    <div id='hour'></div>
    <div id='minute'></div>
    <div id='second'></div>
</div>

2.js代码

        //获取当前时间戳
        var date = +new Date();
        //获取结束时间戳
        var endtime = +new Date('2021-10-14 15:00:00');
        //获取时间戳的差值
        var time = endtime - date;
        //获取秒,分,小时,天数
        var dd = Math.floor(time / 1000 / 60 / 60 / 24);
        var hh = Math.floor((time) / 1000 / 60 / 60);
        var mm = Math.floor(time / 1000 / 60);
        var ss = Math.floor((time - mm * 1000 * 60) / 1000)
        console.log(`${dd}天${hh}小时${mm}分${ss}秒`);
        document.querySelector('#hour').innerHTML = hh + '时';
        document.querySelector('#minute').innerHTML = mm + '分';
        document.querySelector('#second').innerHTML = ss + '秒';
        

.这样就获取到了一个倒计时.剩下的就需要让他实现动态的倒计功能了.只需要添加一个定时器即可.

 

    setInterval(function () {
            //获取当前时间戳
            var date = +new Date();
            //获取结束时间戳
            var endtime = +new Date('2021-10-14 15:00:00');
            //获取时间戳的差值
            var time = endtime - date;
            //获取秒,分,小时,天数
            var dd = Math.floor(time / 1000 / 60 / 60 / 24);
            var hh = Math.floor((time) / 1000 / 60 / 60);
            var mm = Math.floor(time / 1000 / 60);
            var ss = Math.floor((time - mm * 1000 * 60) / 1000)
            // console.log(`${dd}天${hh}小时${mm}分${ss}秒`);
            document.querySelector('#hour').innerHTML = hh + '时';
            document.querySelector('#minute').innerHTML = mm + '分';
            document.querySelector('#second').innerHTML = ss + '秒';
            
        },1000)

3.补零

当数字只有1位数时我们需要在前面补一个0;代码比较简单

 

 我们可以封装一个函数.注意函数一定需要一个返回值.最后只需要调用这个函数即可.

 倒计时功能完成.