怎么用JavaScript实现京东秒杀效果

本篇内容介绍了“怎么用JavaScript实现京东秒杀效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

首先先利用html和css搭出架子：

* {            margin: 0;            padding: 0;        }                .box {            width: 190px;            height: 270px;            color: #fff;            text-align: center;            margin: 100px auto;            background-color: #d00;            padding-top: 40px;            box-sizing: border-box;        }                .box>h4 {            font-size: 26px;        }                .box>p:nth-of-type(1) {            color: rgba(255, 255, 255, .5);            margin-top: 5px;        }                .box>i {            display: inline-block;            margin-top: 5px;            margin-bottom: 5px;            font-size: 40px;        }                .box>.time {            display: flex;            justify-content: center;            margin-top: 10px;        }                .time>div {            width: 40px;            height: 40px;            background: #333;            line-height: 40px;            text-align: center;            font-weight: 700;            position: relative;        }                .time>div::before {            content: "";            display: block;            width: 100%;            height: 2px;            background: #d00;            position: absolute;            left: 0;            top: 50%;            transform: translateY(-50%);        }                .time>.minute {            margin: 0 10px;}

<div class="box">        <h4>京东秒杀</h4>        <p>FLASH DEALS</p>        <i class="iconfont icon-lightningbshandian"></i>        <p>本场距离结束还剩</p>        <div class="time">            <div class="hour">00</div>            <div class="minute">00</div>            <div class="second">00</div>        </div> </div>

再来设计其逻辑部分：

获取相关元素

定义一个处理两个时间差的函数，需要注意的是对于小时、分钟、秒钟如果小于10，那么应该在前面添加“0”来占位，最后利用对象的形式将其返回

为了实现其一个动态的效果，我们可以利用setInterval()，将获取到的时分秒全部放入进去，使其每隔一秒就变化一次

为了用户一打开就能看到效果，我们可以将获取到的时分秒封装到一个函数里，在setInterval()里和外直接调用函数即可实现

//1.获取需要操作的元素const oHour = document.querySelector(".hour");const oMinute = document.querySelector(".minute");const oSecond = document.querySelector(".second"); //2.处理时间差 const remDate = new Date("2021-10-28 23:59:59");         setTime(remDate);         //开启定时器        setInterval(function() {            setTime(remDate);        }, 1000);         //为了让用户一进来就看得到效果，而不是先是三个00        // 我们可以对其进行封装处理        function setTime(remDate) {            const obj = getDifferTime(remDate);            // console.log(obj);             //3.将差值设置给元素            oHour.innerText = obj.hour;            oMinute.innerText = obj.minute;            oSecond.innerText = obj.second;        }         function getDifferTime(remDate, curDate = new Date()) {            //1.得到两个时间之间的差值（毫秒）            const differTime = remDate - curDate;             //2.得到两个时间之间的差值（秒 ）            const differSecond = differTime / 1000;             //3.利用相差的总秒数 / 每一天的秒数 = 相差的天数            let day = Math.floor(differSecond / (60 * 60 * 24));            day = day >= 10 ? day : "0" + day;             //4.利用相差的总秒数 / 小时 % 24            let hour = Math.floor(differSecond / (60 * 60) % 24);            hour = hour >= 10 ? hour : "0" + hour;             //5.利用相差的总秒数 / 分钟 % 60            let minute = Math.floor(differSecond / 60 % 60);            minute = minute >= 10 ? minute : "0" + minute;             // 6.利用相差的总秒数 % 秒数            let second = Math.floor(differSecond % 60);            second = second >= 10 ? second : "0" + second;             return {                day: day,                hour: hour,                minute: minute,                second: second,            }        }

“怎么用JavaScript实现京东秒杀效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！