考试系统—— 刷新页面 考试剩余时间不重新开始
查了些资料整理如下:
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
考试系统—— 刷新页面 考试剩余时间不重新开始相关推荐
- 万维考试系统python_万维考试学生客户端
万维考试系统学生端是万维考试系统的学生考试客户端,万维考试系统是一个非常不错的局域网在线考试系统,如果你们学校(或培训教育机构)采用了该考试系统,那么你在考试的时候必需使用该客户端进行考试,并支持练习 ...
- 猎证计算机等级考试二级试题讲解,猎证计算机等级考试系统(计算机等级考试助手)V3.64 免费版...
猎证计算机等级考试系统(计算机等级考试助手)是一款很优秀好用的计算机等级考试的辅助工具.如果你需要一款好用的计算机考试软件,不妨试试小编带来的这款猎证计算机等级考试系统,功能强大全面,使用后可以帮助用 ...
- 助理执业医师(中药)考试系统_金桥考试虫 v2.0 官方
Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...
- 一级建造师(石油化工)考试系统_金桥考试虫 v2.0 官方
Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...
- 质量专业资格(初级)考试系统_金桥考试虫 v2.0 怎么用
Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...
- 一级建造师(装饰装修)考试系统_金桥考试虫 v2.0 绿色
Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...
- 一级建造师(港口与航道)考试系统_金桥考试虫 v2.0 官网
Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...
- 一级建造师(市政工程)考试系统_金桥考试虫 v2.0 免费
Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...
- 一级建造师(机电安装)考试系统_金桥考试虫 v2.0 下载
Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...
最新文章
- 【iOS官方文档翻译】UICollectionView与UICollectionViewFlowLayout
- pyxml for python 2.6 死而复生
- mysql 排序字段是否需要建索引_MySQL索引详解(优缺点,何时需要/不需要创建索引,索引及sql语句的优化)...
- zabbix对网站web监控(配置模板)
- TOMCAT启动汉字乱码解决方案
- 排序算法专题-插入排序
- 将本地code推到gitee
- 使用cmd命令创建maven(web)项目+项目转换成IDEA项目+项目打包+Jetty运行Web项目
- Lucene的几种分词系统
- 空洞卷积详解(输入输出大小分析)
- Chrome键盘快捷键
- Android应用市场和应用包名大全
- linux怎么进入自己添加的软盘,linux – 创建没有mount的虚拟软盘映像?
- Python代码编辑器jupyter的使用
- 复化科特斯公式matlab_【原创】牛顿-柯特斯数值积分公式及其MATLAB的实现
- 2022-2028年全球与中国摆式斗式提升机市场现状及未来发展趋势分析报告
- 机器视觉之eVision
- 记一次面试准备(续上)
- 【MFC】数据库操作——ODBC(20)
- 【时空序列】AAAI2021| 利用时空融合图神经网络进行交通流量预测
热门文章
- Lua——基本语法知识,从hello word开始
- STL-String源码分析
- 基于JAVA服务器监控系统设计,远程数字图像监控系统中web服务器的设计与实现...
- 用Spring更好地处理Struts动作三种整合
- winmerge 注意事项
- Knockout 官网学习文档目录
- 迅为I.MX6Q开发板配不同分辨率不同尺寸液晶屏幕
- Spring错误小结
- 2015.05.15,外语,学习笔记-《Word Power Made Easy》 01 “如何讨论人格特点”
- ACM主要赛考察内容