JavaScript实现京东秒杀效果
程序员文章站
2022-03-20 13:18:15
本文实例为大家分享了javascript实现京东秒杀效果的具体代码,供大家参考,具体内容如下首先先利用html和css搭出架子:* { margin: 0;...
本文实例为大家分享了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, } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: i59400f能带动2070s吗?
下一篇: 电工也不是一般人能做的