JavaScript之实现秒杀倒计时

最新推荐文章于 2024-06-07 14:09:03 发布

我是真的垃圾啊

最新推荐文章于 2024-06-07 14:09:03 发布

阅读量1.2k

点赞数 3

分类专栏：前端小项目 JS 前端学习文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/fujiaxu666/article/details/120816507

版权

前端学习同时被 3 个专栏收录

36 篇文章

订阅专栏

19 篇文章

订阅专栏

前端小项目

3 篇文章

订阅专栏

需求分析

用户自定义一个时间，开始倒计时。

效果展示

请添加图片描述

思路

利用时间戳来判断当前时间和设定时间的差值，然后分别求出时分秒即可。
JavaScript获得时间戳的方式有

+new Date()
obj.vauleof
obj.getTime
Date.now()

代码

<!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>哈哈秒杀</title>
    <style>
        .mS {
            width: 200px;
            height: 200px;
            background-color: red;
            font-size: 14px;
            overflow: hidden;
            /* 开启BFC，解决外边距合并的问题 */
            margin: 50px auto;
        }

        .mS .title {
            display: block;
            font-weight: 700;
            text-align: center;
            /* 对span没用，因为他是行内行内元素 */
            margin-top: 45px;
        }

        .mS .time {
            margin-top: 70px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
        }

        .mS .time div {
            width: 40px;
            height: 40px;
            text-align: center;
            background-color: #000;
            color: #fff;
        }

        .mS .time div,
        .mS .time span {
            margin-left: 12px;
            float: left;
        }
    </style>
</head>

<body>

    <div class="mS">
        <span class="title">没钱就别秒杀了，抢不到的！</span>
        <div class="time">
            <div>12</div>
            <span>:</span>
            <div></div>
            <span>:</span>
            <div></div>
        </div>
    </div>

    <script>
        let setTime = '2021-10-17 22:17:00';
        let divs = document.querySelectorAll('.time div');
        let timer = null;/* 定时器 */
        function countTime(time) {
            let nowTime = +new Date();// 现在时间的时间戳
            let timeC = +new Date(time);//输入时间的时间戳
            let Time = (timeC - nowTime) / 1000; // 相差时间的秒
            if (Time <= 0){/* 时间已到，或者超过 */
                divs[0].innerHTML = divs[1].innerHTML = divs[2].innerHTML = '00';
                clearInterval(timer);
                return;
            }
            // 在这里我们不处理天数,默认在0天内
            let hours = Math.floor(Time / 3600);
            hours = hours<10 ? '0' + hours : hours;
            divs[0].innerHTML = hours; 
            let Mins = Math.floor(Time / 60 % 60) 
            Mins = Mins<10 ? '0' + Mins : Mins;
            divs[1].innerHTML = Mins;
            let s = Math.floor(Time % 60);
            s = s<10 ? '0' + s : s;
            divs[2].innerHTML = s;
        }
        countTime(setTime);
        timer= setInterval("countTime(setTime)",1000);/* 传入带有参数的函数 */
    </script>
</body>

</html>