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之你需要了解的几本书
May 19 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
跟老齐学Python之Python安装
2014/09/12 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
python selenium firefox使用详解
2019/02/26 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
C#中的验证控件有几种
2014/03/08 面试题
Linux的主要特性
2016/09/03 面试题
马云的职业生涯规划之路
2014/01/01 职场文书
运动会广播稿300字
2014/01/10 职场文书
爱情保证书范文
2014/02/01 职场文书
文明风采获奖感言
2014/02/18 职场文书
小学英语教学反思范文
2016/02/15 职场文书
PHP RabbitMQ消息列队
2022/05/11 PHP