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 相关文章推荐
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
Vue实现导航栏菜单
Aug 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
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php安装swoole扩展的方法
2015/03/19 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
PHP实现简易计算器功能
2020/08/28 PHP
js实现网页定位导航功能
2017/03/07 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
python分割文件的常用方法
2014/11/01 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
分享vim python缩进等一些配置
2018/07/02 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
就业推荐表院系意见
2015/06/05 职场文书
新郎新娘致辞
2015/07/31 职场文书
R9700摩机记
2022/04/05 无线电