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 相关文章推荐
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
angularJS 中input示例分享
Feb 09 Javascript
JavaScript事件委托实例分析
May 26 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
Vue.use源码分析
Apr 22 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 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 minixml详解
2008/07/19 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
实践Vim配置python开发环境
2018/07/02 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
python绘制趋势图的示例
2020/09/17 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
交通安全演讲稿
2014/01/07 职场文书
中式婚礼主持词
2014/03/13 职场文书
酒店节能降耗方案
2014/05/08 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
教师一帮一活动总结
2014/07/08 职场文书
营销学习心得体会
2014/09/12 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
 python中的元类metaclass详情
2022/05/30 Python