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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
jQuery文字轮播特效
Feb 12 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
Angularjs的启动过程分析
Jul 18 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 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
php跨域cookie共享使用方法
2014/02/20 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python下MySQLdb用法实例分析
2015/06/08 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Django的models模型的具体使用
2019/07/15 Python
python多线程同步实例教程
2019/08/11 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
python能开发游戏吗
2020/06/11 Python
Python识别处理照片中的条形码
2020/11/16 Python
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
职业生涯规划设计步骤
2014/01/12 职场文书
教师专业自荐书范文
2014/02/10 职场文书
司机检讨书
2014/02/13 职场文书
学习十八大标语
2014/10/09 职场文书
2015年社区统计工作总结
2015/04/21 职场文书