用JS怎样写京东秒杀的效果,设计思路和方法是什�
Admin 2022-06-18 群英技术资�
本文实例为大家分享了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, } }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要介绍了通过vue实现网页截图的功能,有兴趣的童鞋可以了解一�
JavaScript中怎样求一个数的平�?对于一个数的平方运算,大家应该都不陌生,那么我们用JavaScript编码要怎样写呢?下文给大家分享两个方法,感兴趣的朋友就继续往下看吧�
这篇文章主要为大家详细介绍了JS+CSS实现过渡特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
这篇文章主要介绍了vue使用echarts画组织结构图的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078