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 一个函数对同一元素的多个事件响应
Jul 25 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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目录管理函数小结
2008/09/10 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
javascript常用对话框小集
2013/09/13 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
python简单实现AES加密和解密
2019/03/28 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
Django框架视图介绍与使用详解
2019/07/18 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
同事去世追悼词
2015/06/23 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
移除Selenium中window.navigator.webdriver值
2022/06/10 Python