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;
}
<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.获取需要操作的元素
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,
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。