| 本文实例为大家分享了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, } }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
JavaScript实现简单的拖拽效果
JavaScript实现滑块验证码 |
