【亲测】实现秒表倒计时+缓存倒计时功能
实现秒表倒计时+缓存倒计时功能
<!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>
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！245356668@qq.com
2. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！
3. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理，解压密码：我正青年 或者 www.5zqn.com
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 本站不保证所提供下载的资源的准确性、安全性和完整性，源码仅供下载学习之用！
8. 如用于商业或者非法用途，与本站无关，一切后果请用户自负！
我正青年 » 【亲测】实现秒表倒计时+缓存倒计时功能
2. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！
3. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理，解压密码：我正青年 或者 www.5zqn.com
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 本站不保证所提供下载的资源的准确性、安全性和完整性，源码仅供下载学习之用！
8. 如用于商业或者非法用途，与本站无关，一切后果请用户自负！
我正青年 » 【亲测】实现秒表倒计时+缓存倒计时功能
