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获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
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 简单数组排序实现代码
2009/08/05 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
页面使用密码保护代码
2013/04/10 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
JavaScript类的写法
2016/09/17 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
Angular CLI 安装和使用教程
2017/09/13 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
python结合API实现即时天气信息
2016/01/19 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
python实现简单中文词频统计示例
2017/11/08 Python
python对excel文档去重及求和的实例
2018/04/18 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python实现图片上添加图片
2019/11/26 Python
Python yield的用法实例分析
2020/03/06 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
精彩的英文自荐信
2014/01/30 职场文书
员工规章制度范本
2015/08/07 职场文书