JS倒计时

最新推荐文章于 2023-02-09 11:59:48 发布

相约在一年四季

最新推荐文章于 2023-02-09 11:59:48 发布

阅读量322

点赞数

分类专栏： JS 文章标签：倒计时 js js倒计时 js抢购倒计时

本文链接：https://blog.csdn.net/D321xiaoding/article/details/82290761

版权

JS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用JavaScript来创建一个倒计时功能，适用于抢购倒计时等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

倒计时

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box {
                width: 300px;
                height: 50px;
                border: 1px solid #ccc;
            }
        </style>
    </head>

    <body>
        <div id="box"></div>
        <script type="text/javascript">
            //倒计时
            var timer = setInterval(function box() {//setInterval（）定时器，它可以传两个参数，第一个参数为一个函数，第二个参数是每隔多长时间执行的毫秒数。
                var time = new Date('2018-9-17 00:00:00');//先设定一个时间，比如说要抢购的时间
                var now = new Date();//获取现在的时间
                var min = time - now;//设定抢购的时间减去现在的时间，得到一个时间差，-->毫秒数

                var oBox = document.getElementById('box');//获取盒子box
                if(min <= 0){//当时间差小于等于0
                    clearInterval(timer);//停止定时器
                    oBox.innerHTML = '开始秒杀'

                }else{
                var hour = Math.floor(min / 1000 / 60 / 60);//小时 = 秒/ 1000 / 60 / 60   Math.floor（）是向下取整  假如得出的数为1.2小时，向下取整就是1小时
                if(hour < 10) {//如果小时数小于10，比如说8，前面就会没有0，现在想让它显示08这种形式
                    hour = '0' + hour;
                }
                var minite = Math.floor(min / 1000 / 60 % 60);//分钟数为毫秒数/ 1000 / 60，对60取余是因为如果得出的分钟数为90分钟，取余得到分钟数，多出的部分自动进为小时
                if(minite < 10) {
                    minite = '0' + minite;
                }
                var second = Math.floor(min / 1000 % 60);//秒数为毫秒数/1000,对60取余是如果得出的秒数为80，对60取余得20,20为秒数。
                if(second < 10) {
                    second = '0' + second;
                }
                oBox.innerHTML = ('距离抢购时间剩余：' + hour + '时' + minite + '分' + second + '秒');//oBox.innerHTML更改盒子要显示的内容，显示为=号后面的内容。
}
            }, 1000);//每隔1000毫秒，也就是每隔1s的时候，执行这个函数
        </script>
    </body>

</html>