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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
php HandlerSocket的使用
2011/05/02 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
python操作mysql代码总结
2018/06/01 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
python 爬取疫情数据的源码
2020/02/09 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
C语言面试题
2013/05/19 面试题
家长写给孩子的评语
2014/04/18 职场文书
施工工地安全标语
2014/06/07 职场文书
对学校的意见和建议
2015/06/04 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
MySQL Server 层四个日志
2022/03/31 MySQL
vue实现拖拽交换位置
2022/04/07 Vue.js
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android