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 相关文章推荐
自己动手手写jQuery插件总结
Jan 20 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
vscode中使用npm安装babel的方法
Aug 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数组的一些常见操作汇总
2011/07/17 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
Python脚本实现网卡流量监控
2015/02/14 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
python制作小说爬虫实录
2017/08/14 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
python numpy库np.percentile用法说明
2020/06/08 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
2014年车间工作总结
2014/11/21 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL