js防刷新的倒计时代码 js倒计时代码


Posted in Javascript onSeptember 06, 2017

最近在维护考试系统,在进行考试测试时无意中点击了刷新按钮,但是上面的倒计时并没有受到影响,同时在几篇博客中也有这样的例子,所以我想看看它到底是怎样防止刷新的。

如果是用cs代码写,我们可能会很快的写出来怎样防止刷新,可是我们要进行前段开发,考试是在页面上进行的,这里就要用到我们学到的js了。

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>前端开发</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;
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>

其实,这里最主要的思想就是,我们将时间放到一个变量中,刷新后,我们从变量中接着读取这个数据即可。我们也可以用cookie存开始时间,刷新以后先读取cookie。方法也许不只是这一个,希望大家有更好地方法来多多交流。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 #Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 #Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 #Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 #Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 #Javascript
jquery实现限制textarea输入字数的方法
Sep 06 #jQuery
Vue的百度地图插件尝试使用
Sep 06 #Javascript
You might like
一个显示天气预报的程序
2006/10/09 PHP
smarty section简介与用法分析
2008/10/03 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
python列表的增删改查实例代码
2018/01/30 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
自我鉴定的范文
2013/10/03 职场文书
老师对学生的评语
2014/04/18 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL