JavaScript实现京东秒杀效果 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>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; }

京东秒杀
FLASH DEALS
本场距离结束还剩
000000

文章图片

【JavaScript实现京东秒杀效果】再来设计其逻辑部分：
获取相关元素
定义一个处理两个时间差的函数，需要注意的是对于小时、分钟、秒钟如果小于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.利用相差的总秒数 / 小时 % 24let hour = Math.floor(differSecond / (60 * 60) % 24); hour = hour >= 10 ? hour : "0" + hour; //5.利用相差的总秒数 / 分钟 % 60let 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,}}