JavaScript实现京东秒杀效果

这篇文章主要为大家详细介绍了JavaScript实现京东秒杀效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 

本文实例为大家分享了JavaScript实现京东秒杀效果的具体代码，供大家参考，具体内容如下

 

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

* {             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>h3 {             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; }

1 2 3 4 5 6 7 8 9 10 11

<div class="box">         <h3>京东秒杀</h3>         <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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

//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,             }         }

以上就是本文的全部内容，希望对大家的学习有所帮助。