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 相关文章推荐
js实现ArrayList功能附实例代码
Oct 29 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 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的php类
2006/10/09 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
python列表的常用操作方法小结
2016/05/21 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python文件和文件夹复制函数
2020/02/07 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
宣传策划类求职信范文
2014/01/31 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
继承公证书
2014/04/09 职场文书
施工安全责任书范本
2014/07/24 职场文书
孩子教育的心得体会
2014/09/01 职场文书
教师个人年终总结
2015/02/11 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android