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 相关文章推荐
javascript 精粹笔记
May 09 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
JsRender for object语法简介
Oct 31 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
7个好用的JavaScript技巧分享(译)
May 07 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
PHP操作xml代码
2010/06/17 PHP
浅析PHP绘图技术
2013/07/03 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python实现的最近最少使用算法
2015/07/10 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
python getpass实现密文实例详解
2019/09/24 Python
python实现与redis交互操作详解
2020/04/21 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
意向协议书范本
2014/04/23 职场文书
护士感人事迹
2014/05/01 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
迟到检讨书
2015/01/26 职场文书
婚宴新郎致辞
2015/07/28 职场文书
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS