JavaScript实现刷新不重记的倒计时


Posted in Javascript onAugust 10, 2016

前言

JavaScript倒计时,实现起来不难,但是一刷新往往就重新计算了,如果要实现刷新不重计该如何做呢?

有这么几种思路,

     1:cookie

     2:本地缓存

     3:window.name ……

前两种比较容易理解,今天我来为大家实现使用window.name实现刷新不重计,代码如下: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js倒计时-刷新不重计</title>
</head>
 
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
var maxtime;
if(window.name==''){ 
 maxtime = 1*60;
 }else{
 maxtime = window.name;
}
 
function CountDown(){
 if(maxtime>=0){
 minutes = Math.floor(maxtime/60);
 seconds = Math.floor(maxtime%60);
 msg = "距离考试结束还有"+minutes+"分"+seconds+"秒";
// document.all["timer"].innerHTML = msg;
 document.getElementById("timer").innerHTML = msg;
 if(maxtime == 5*60) alert('注意,还有5分钟!');
 --maxtime;
 window.name = maxtime; 
 }
 else{
 clearInterval(timer);
 alert("考试时间到,结束!");
 }
}
timer = setInterval("CountDown()",1000);
//-->
</SCRIPT>
<div id="timer" style="color:red"></div> 
 
</body>
</html>

总结

好了,就这么实现了,很简单吧!以上就是关于JavaScript实现刷新不重记的倒计时的全部内容,这个功能在模拟考试中很实用,希望对大家有所帮助。

Javascript 相关文章推荐
基于jQuery的自动完成插件
Feb 03 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 #Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 #Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 #Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 #Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 #Javascript
基于JavaScript实现树形下拉框
Aug 10 #Javascript
关于原生js中bind函数的简单实现
Aug 10 #Javascript
You might like
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
保研推荐信
2014/05/09 职场文书
车贷收入证明范本
2014/09/14 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
刑事代理授权委托书
2014/09/17 职场文书
2014年关工委工作总结
2014/11/17 职场文书
搞笑婚前保证书
2015/02/28 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
React配置子路由的实现
2021/06/03 Javascript
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android