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中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
javascript内存管理详细解析
Nov 11 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 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 获取select下拉列表框的值
2010/05/08 PHP
php HandlerSocket的使用
2011/05/02 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
理解javascript闭包
2015/12/15 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python实现在目录中查找指定文件的方法
2014/11/11 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
pytorch中的inference使用实例
2020/02/20 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
六月份红领巾广播稿
2014/02/03 职场文书
暑期培训随笔感言
2014/03/10 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
2015年党性分析材料
2014/12/19 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
Python编程编写完善的命令行工具
2021/09/15 Python
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
解决redis批量删除key值的问题
2022/03/23 Redis