JS-实现秒表倒计时+缓存倒计时

实现秒表倒计时+缓存倒计时功能

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><p class="diffDate"></p><p class="counterSecond"></p></body><script type="text/javascript">countTime();function countTime() {var date = new Date();var now = date.getTime();var date2 = new Date();//倒计时10天date2.setDate(date2.getDate() + 10);var d, h, m, s, ms;//从本地获取保存的时间var leftTime = '';var cacheDate = localStorage.getItem( "counter");if(cacheDate) {//缓存有值leftTime = new Date(parseInt(cacheDate)).getTime() - 1000;//更新缓存localStorage.setItem("counter", leftTime);}//如果没有缓存或时间过期if(!cacheDate || leftTime < 0) {leftTime = date2.getTime() - now;//保存最后时间localStorage.setItem("counter", leftTime - 1000);}if(leftTime >= 0) {d = Math.floor(leftTime / 1000 / 60 / 60 / 24 % 31);h = Math.floor(leftTime / 1000 / 60 / 60 % 24);m = Math.floor(leftTime / 1000 / 60 % 60);s = Math.floor(leftTime / 1000 % 60);ms = Math.floor(leftTime % 1000);if(d < 10) {d = "0" + d;}if(h < 10) {h = "0" + h;}if(m < 10) {m = "0" + m;}if(s < 10) {s = "0" + s;}}//console.log(d + ":" + h + ":" + m + ":" + s + ":" + ms)document.getElementsByClassName("diffDate")[0].innerHTML = d + ":" + h + ":" + m + ":" + s;}setInterval(countTime, 1000);var diffCount = 0;/*** 从0到100计数*/function countMilSecond() {++diffCount;if(diffCount >= 100) {diffCount = 0;}if(diffCount < 10) {diffCount = '0' + diffCount;}document.getElementsByClassName("counterSecond")[0].innerHTML = diffCount;}setInterval(countMilSecond, 10);</script></html>

效果：

JS-实现秒表倒计时+缓存倒计时相关推荐

html倒计时timer,js如何使用定时器实现倒计时功能
这次给大家带来js如何使用定时器实现倒计时功能,js使用定时器实现倒计时功能的注意事项有哪些,下面就是实战案例,一起来看一下. 日期函数倒计时 = 用将来的时间 - 现在的时间问题:将来时间距 ...
利用JS实现短信验证码倒计时案例
本章教程利用JS实现发送短信倒计时案例,这个需求在实际开发过程很常见. 目录一.程序代码二.预览展示一.程序代码 <!DOCTYPE html> <html lang=&quo ...
HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)
HTML+CSS+svg绘制精美彩色闪灯圣诞树, HTML+CSS+Js实时新年时间倒数倒计时(附源代码) 本篇目录一.前言二.主要功能三.效果展示四.编码实现步骤五.资源下载六.完整源代 ...
JS实现考试题目系统倒计时自动交卷（转载）
JS实现考试题目系统倒计时自动交卷(转载) 自动交卷JS代码(微改) 自动交卷JS代码(微改) 目前为60分钟自动执行BT_JJ(Button)按钮点击事件,时间显示在LB_JS(Label)中 &l ...
JS 写的5秒钟倒计时跳转
js写的5秒钟倒计时跳转 jquery-3.4.1下载 <!DOCTYPE html> <html lang="en"> <head><m ...
解决修改css或js文件，浏览器缓存更新问题。
解决修改css或js文件,浏览器缓存更新问题. 参考文章: (1)解决修改css或js文件,浏览器缓存更新问题. (2)https://www.cnblogs.com/zhangycun/p/7427 ...
nginx html 不缓存,nginx如何实现js和css不缓存
nginx如何实现js和css不缓存发布时间:2020-12-14 09:52:10 来源:亿速云阅读:133 作者:小新小编给大家分享一下nginx如何实现js和css不缓存,相信大部分人都还 ...
秒针计时器 html,js实现秒表计时器
本文实例为大家分享了js实现秒表计时器的具体代码,供大家参考,具体内容如下秒表计时器的实现: 效果图如下: 附代码,已调试运行 Document #div1 { width: 300px; heig ...
android 日倒计时计算器,倒计时(倒数日在线计算)
2.这个程序得到火箭专家们的一致赞许,而且超越了使用范围,在这部影片中,扣. 它的意义有二.1"点火的发射程序:倒计时,成为一个适用性极强."倒计时"这一. 正计时原因 ...

JS-实现秒表倒计时+缓存倒计时

JS-实现秒表倒计时+缓存倒计时相关推荐

最新文章

热门文章