H5活动开始/结束倒计时实现
最近在做一个活动页，根据后端返回的活动开始时间、结束时间判断当前活动的状态以及实现倒计时
效果，上一篇文章有记录ios倒计时踩坑，这里记录下倒计时效果实现。
倒计时效果
js:
/**获取现在的时间*/ var nowTime = new Date().getTime(); /**活动开始时间*/ var startT = '2020-05-20 10:00:00'.replace(/-/g, "/"); var startTime = new Date(startT).getTime(); /**活动结束时间*/ var endT = '2020-05-22 10:00:00'.replace(/-/g, "/"); var endTime = new Date(endT).getTime(); var timeDiff; var remark = "距离活动"; if (startTime >= nowTime) { /**活动未开始*/ timeDiff = (startTime - nowTime) / 1000; remark += "开始"; } else if (startTime < nowTime && nowTime <= endTime) { /**活动已开始未结束*/ timeDiff = (endTime - nowTime) / 1000; remark += "结束"; } else if (nowTime > endTime) { /**活动已结束*/ remark = "活动已结束"; } if (timeDiff > 0) { setUpTimer(timeDiff); } /**定时器*/ var t; function setUpTimer(time) { t = setInterval(function () { time-- formatSeconds(time) if (time <= 0) { clearInterval(t) } }, 1000) } /**小于10的数字前加0*/ function formatBit(val) { /*转变为数字类型*/ val = +val return val > 9 ? "<span>" + val + "</span>" : "<span>0" + val + "</span>" } /**根据时差计算剩余时分秒*/ function formatSeconds(time) { if (time < 0) { time = 0; } var min = Math.floor(time % 3600) var val = formatBit(Math.floor(time / 3600)) + ':' + formatBit(Math.floor(min / 60)) + ':' + formatBit(Math.floor(time % 60)) document.getElementsByClassName("clock-s")[0].innerHTML = remark + val; }html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>倒计时开始</title> <style> * { padding: 0; margin: 0; } .clock-s { margin: 50px; text-align: center } .clock-s span { padding: 10px 5px; margin-left: 5px; background-color: #dcdcdc; border-radius: 4px; } </style></head><body> <div class="clock-s"> <span>00</span>:<span>00</span>:<span>00</span> </div></body></html>原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » H5活动开始/结束倒计时实现
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » H5活动开始/结束倒计时实现
