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 文字符串转换unicode编码函数
May 30 Javascript
优化javascript的执行速度
Jan 23 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
js表单验证实例讲解
Mar 31 Javascript
js倒计时显示实例
Dec 11 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
JavaScript array常用方法代码实例详解
Sep 02 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邮件发送,php发送邮件的类
2011/03/24 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
Laravel5中contracts详解
2015/03/02 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
java解析json方法总结
2019/05/16 PHP
javaScript复制功能调用实现方案
2012/12/13 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python 元类实例解析
2018/04/04 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
python进阶之自定义可迭代的类
2019/08/20 Python
python tornado修改log输出方式
2019/11/18 Python
Python 在局部变量域中执行代码
2020/08/07 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
交通安全教育主题班会
2015/08/12 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
《青山不老》教学反思
2016/02/22 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL