查了些资料整理如下:

JavaScript倒计时,实现起来不难,但是一刷新往往就重新计算了,如果要实现刷新不重计该如何做呢?

有这么几种思路,

方法1:cookie

《JS写的在线考试倒计时,Cookie防止刷新》 链接地址:https://my.oschina.net/u/2358721/blog/464652

代码:

$(function() {var _minute = parseInt("${exampaper.paperTime }");var _expiresHours = _minute * 60 * 1000;if(!hasSetCookie()){addCookie("${examinee.examineeId}", _expiresHours, _expiresHours);} settime($("#remainTime")); });function hasSetCookie(){var strCookie = document.cookie;var arrCookie = strCookie.split("; ");for (var i = 0; i < arrCookie.length; i++) {var arr = arrCookie[i].split("=");if (arr[0] == "${examinee.examineeId}") {return true;}};return false;}//开始倒计时function settime(remainTime) {var _time = getCookieValue("871d31bacfd4451484c5f70f8860c2a9");var _countdown = parseInt(getCookieValue("${examinee.examineeId}")) / 1000;if (_countdown <= 0) {alert("考试时间到!");endExam();} else {var _second = _countdown % 60;var _minute = parseInt(_countdown / 60) % 60;var _hour = parseInt(parseInt(_countdown / 60) / 60);if (_hour < 10)_hour = "0" + _hour.toString();if (_second < 10)_second = "0" + _second.toString();if (_minute < 10)_minute = "0" + _minute.toString();remainTime.html(_hour + ":" + _minute + ":" + _second);_countdown--;editCookie("${examinee.examineeId}", _countdown * 1000, _countdown * 1000);}//每1000毫秒执行一次setTimeout(function() {settime(remainTime);}, 1000);};//时添加cookiefunction addCookie(name, value, expiresHours) {var cookieString = name + "=" + escape(value); //escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。//判断是否设置过期时间,0代表关闭浏览器时失效if (expiresHours > 0) {var date = new Date();date.setTime(date.getTime() + expiresHours * 1000);cookieString = cookieString + ";expires=" + date.toUTCString();}document.cookie = cookieString;}//修改cookie的值function editCookie(name, value, expiresHours) {var cookieString = name + "=" + escape(value);if (expiresHours > 0) {var date = new Date();date.setTime(date.getTime() + expiresHours * 1000); //单位是毫秒cookieString = cookieString + ";expires=" + date.toGMTString();}document.cookie = cookieString;}//根据名字获取cookie的值function getCookieValue(name) {var strCookie = document.cookie;var arrCookie = strCookie.split("; ");for (var i = 0; i < arrCookie.length; i++) {var arr = arrCookie[i].split("=");if (arr[0] == name) {return unescape(arr[1]);break;} else {continue;};};}

View Code

  • 用settimeout每隔一秒触发一次
  • 用cookies在cookies中读取剩余时间
  • 代码:

<script language="javascript" type = "text/javascript">function GetCookieByName(name) {//获取cookie字符串 var strCookie = document.cookie;//将多cookie切割为多个名/值对 var arrCookie = strCookie.split("; ");var userId;//遍历cookie数组,处理每个cookie对 for (var i = 0; i < arrCookie.length; i++) {var arr = arrCookie[i].split("=");//找到名称为name的cookie,并返回它的值 if (name == arr[0]) {userId = arr[1];break;}}return userId; }function Change(m, s) {s = s - 1;if (s < 0) {s = 60 + s;m = m - 1;}if (m == 10 && s == 0) {alert("离答题结束还有10分钟,请尽快完成题目!");}document.getElementById("divtime").innerHTML = m + "分" + s + "秒";document.cookie = "m=" + m;document.cookie = "s=" + s;setTimeout(function() {Change(m,s);}, 1000);}window.onload = function() {//SetCookie(20, 20);var m = GetCookieByName("m");var s = GetCookieByName("s");Change(m, s);}</script>

View Code

.net后台部分:

在后台代码中设置cookies值

Response.Cookies["m"].Value =  strs[0];
Response.Cookies["s"].Value = strs[1];

     方法2:本地缓存

也可以和服务器时间同步,把计时器读取放在服务器端,考虑到是在线考试,实际用的较少

方法3:window.name (此方法已验证)

原文链接:http://www.jb51.net/article/90204.htm

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>前端开发http:write.blog.csdn.net/postlist</title>
</head><body>
<form>
<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("考试时间到,结束!");//添加额外代码            //document.getElementById("imgBtnSubmit").click(); //规定时间结束后自动提交按钮 提交试卷
        }}timer = setInterval("CountDown()",1000);
//-->
</SCRIPT>
<div id="timer"style="color:red"></div>
</form>
</body></html></span>

转载于:https://www.cnblogs.com/wuling129/p/6904529.html

考试系统—— 刷新页面 考试剩余时间不重新开始相关推荐

  1. 万维考试系统python_万维考试学生客户端

    万维考试系统学生端是万维考试系统的学生考试客户端,万维考试系统是一个非常不错的局域网在线考试系统,如果你们学校(或培训教育机构)采用了该考试系统,那么你在考试的时候必需使用该客户端进行考试,并支持练习 ...

  2. 猎证计算机等级考试二级试题讲解,猎证计算机等级考试系统(计算机等级考试助手)V3.64 免费版...

    猎证计算机等级考试系统(计算机等级考试助手)是一款很优秀好用的计算机等级考试的辅助工具.如果你需要一款好用的计算机考试软件,不妨试试小编带来的这款猎证计算机等级考试系统,功能强大全面,使用后可以帮助用 ...

  3. 助理执业医师(中药)考试系统_金桥考试虫 v2.0 官方

    Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...

  4. 一级建造师(石油化工)考试系统_金桥考试虫 v2.0 官方

    Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...

  5. 质量专业资格(初级)考试系统_金桥考试虫 v2.0 怎么用

    Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...

  6. 一级建造师(装饰装修)考试系统_金桥考试虫 v2.0 绿色

    Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...

  7. 一级建造师(港口与航道)考试系统_金桥考试虫 v2.0 官网

    Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...

  8. 一级建造师(市政工程)考试系统_金桥考试虫 v2.0 免费

    Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...

  9. 一级建造师(机电安装)考试系统_金桥考试虫 v2.0 下载

    Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...

最新文章

  1. 【iOS官方文档翻译】UICollectionView与UICollectionViewFlowLayout
  2. pyxml for python 2.6 死而复生
  3. mysql 排序字段是否需要建索引_MySQL索引详解(优缺点,何时需要/不需要创建索引,索引及sql语句的优化)...
  4. zabbix对网站web监控(配置模板)
  5. TOMCAT启动汉字乱码解决方案
  6. 排序算法专题-插入排序
  7. 将本地code推到gitee
  8. 使用cmd命令创建maven(web)项目+项目转换成IDEA项目+项目打包+Jetty运行Web项目
  9. Lucene的几种分词系统
  10. 空洞卷积详解(输入输出大小分析)
  11. Chrome键盘快捷键
  12. Android应用市场和应用包名大全
  13. linux怎么进入自己添加的软盘,linux – 创建没有mount的虚拟软盘映像?
  14. Python代码编辑器jupyter的使用
  15. 复化科特斯公式matlab_【原创】牛顿-柯特斯数值积分公式及其MATLAB的实现
  16. 2022-2028年全球与中国摆式斗式提升机市场现状及未来发展趋势分析报告
  17. 机器视觉之eVision
  18. 记一次面试准备(续上)
  19. 【MFC】数据库操作——ODBC(20)
  20. 【时空序列】AAAI2021| 利用时空融合图神经网络进行交通流量预测

热门文章

  1. Lua——基本语法知识,从hello word开始
  2. STL-String源码分析
  3. 基于JAVA服务器监控系统设计,远程数字图像监控系统中web服务器的设计与实现...
  4. 用Spring更好地处理Struts动作三种整合
  5. winmerge 注意事项
  6. Knockout 官网学习文档目录
  7. 迅为I.MX6Q开发板配不同分辨率不同尺寸液晶屏幕
  8. Spring错误小结
  9. 2015.05.15,外语,学习笔记-《Word Power Made Easy》 01 “如何讨论人格特点”
  10. ACM主要赛考察内容