JS实现一个秒杀倒计时页面

最新推荐文章于 2023-11-03 14:38:55 发布

叫我魏什么

最新推荐文章于 2023-11-03 14:38:55 发布

阅读量547

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Lou__Lan/article/details/127660204

版权

<!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>
</head>
<style>
    #middle {
        width: 500px;
        margin: 10px auto;
        color: red;
    }

    #middle span {
        display: inline-block;
        width: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #999;
    }


</style>

<body>
    <div id="box"></div>
    <div id="showWrite">
        <div id="middle"></div>
    </div>

    <script>

        // // 1、限时秒杀
       
        var start = setInterval(timeMinus, 1000);
        function timeMinus() {
            let nowTime = new Date();
            let futureTime = new Date('2022-11-26 20:18:03');
            let minusTime = (futureTime - nowTime) / 1000;
            let day = hour = minutes = seconds = '';
            if (minusTime > 0) {
                let day = parseInt(minusTime / 3600 / 24);
                day < 10 ? '0' + day : day                      // 进行判断，当时间为个位数时在十位处添加 0 
                let hour = parseInt(minusTime / 3600 % 24);
                hour < 10 ? '0' + hour : hour
                let minutes = parseInt(minusTime / 60 % 60);
                minutes < 10 ? '0' + minutes : minutes
                let seconds = parseInt(minusTime % 60);
                seconds < 10 ? '0' + seconds : seconds
                document.querySelector('#middle').innerHTML = `
                                                                距离本场秒杀结束还剩：
                                                                <span>${day}天</span> <span>${hour}时</span> 
                                                                <span>${minutes}分</span> <span>${seconds}秒</span
                                                              `
            }else {
                clearInterval(start); // 秒杀过期，取消定时器
                day = hour = minutes = seconds = '00';
            }
           
        }

    </script>
</body>

</html>