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;
javascript动态效果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,
}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。