js+html5实现页面可刷新的倒计时效果
更新时间：2017年07月15日 15:12:37 作者：ouqi_qiou
这篇文章主要为大家详细介绍了js+html5实现页面可刷新的倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
写了一个5分钟倒计时的代码，有的时候代码需要刷新，然后倒计时又从4：59开始了，我想到的一个解决办法，就是使用缓存，将开始倒计时的时间加上要倒计时的5分钟设为缓存，然后直接用这个缓存时间减去当前时间，就可以一直倒计时了，不管你在倒计时过程中操作了什么，时间总在变吧，哈哈，原理就是这样嘀。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单易用的倒计时js代码</title>
</head>
<body>
<div id="time"></div>
<script src="js/jquery-git.js"></script>
<script>
localStorage.setItem('start', new Date().getTime());
countDown(localStorage.getItem('start'));
function countDown(startTime) {
var time = setInterval(function() {
var currentTime = new Date();
var second = 59 - parseInt(((currentTime.getTime() - startTime) / 1000) % 60);
var min = 4 - parseInt((currentTime.getTime() - startTime) / 60000);
if(min < 10) {
min = "0" + min;
}
if(second < 10) {
second = "0" + second;
}
var countDown = min + ":" + second;
$('#time').html(countDown);
if(second == 0 && min == 0) {
clearInterval(time);
}
}, 1000)
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在 uni-app 中使用自定义插槽（slots）可以让开发者在封装的组件内部定义可替换内容区域，从而实现高度定制化的组件复用，以下是如何在 uni-app 中使用自定义插槽的基本步骤,需要的朋友可以参考下2024-04-04
这篇文章主要为大家详细介绍了小程序实现背景音乐播放和暂停，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
下面小编就为大家带来一篇浅谈JS继承_借用构造函数 & 组合式继承。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
下面小编就为大家带来一篇基于canvas粒子系统的构建详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
js判断undefined类型,undefined,null, 的区别详细解析
本篇文章主要是对js判断undefined类型,undefined,null,NaN的区别进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
拖拉缩放效果，实现通过鼠标拖动来调整层的面积（宽高）大小。例如选框效果。2008-12-12
这篇文章主要介绍了JavaScript 赋值,浅复制和深复制的区别，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章主要为大家详细 介绍了JS实现带动画的回到顶部效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
今天上午抽空随手写了个星级评分的效果，给大家分享下。由于水平有限，如有问题请指出;首先要准备一张星星的图片，灰色是默认状态，黄色是选择状态，需要的朋友可以参考下2012-12-12
只有机器已经联网以后，web应用才能启动，下面使用javascript判断机器是否联网，具体判断代码如下，有此需求的朋友可以参考下2013-08-08
最新评论