考试倒计时jquery+cookie(防止刷新)
2015-10-22 09:07
691 查看
在原贴的基础上改进了一下。基于jquery+cookie实现在线考试倒计时,关闭浏览器后重新打开后依然可以计时。一下代码在本地测试,由于chrome浏览器只支持web的cookie。在实际中倒计时的总时长应从后台获取。
<body> <script type="text/javascript"> $(function() { var _minute = parseInt("1");//"1" 倒计时 多长时间,分钟为单位 var _expiresHours = _minute * 60 * 1000; if(!hasSetCookie()){ //xxxx是cookie的标示,以下均是 addCookie("xxxx", _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] == "xxxx") { return true; } } return false; } //开始倒计时 function settime(remainTime) { var _time = getCookieValue("871d31bacfd4451484c5f70f8860c2a9"); var _countdown = parseInt(getCookieValue("xxxx")) / 1000; if (_countdown == -1) { 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("xxxx", _countdown * 1000, _countdown * 1000); } //每1000毫秒执行一次 setTimeout(function() { settime(remainTime); }, 1000); } //时添加cookie function 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; } } } </script> <span id="remainTime"></span> </body>
相关文章推荐
- jquery通过ajax-json访问java后台传递参数,通过request.getParameter获取不到参数的说明
- PHP+Mysql+jQuery查询和列表框选择操作实例讲解
- jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
- 使用jquery插件qrcode生成二维码
- 使用JQuery实现Ctrl+Enter提交表单的方法
- 10个必须把握的jQuery小技巧
- 26个Jquery使用小技巧
- Ajax使用jQuery和PHP实现功能开关效果
- 2015年创业中遇到的技术问题:1-10(乱码-SpringMVC-jquery-JSON等)
- Jquery 判断下拉框内容 动态显示隐藏区域
- 7行JQuery代码实现回到顶部效果
- jquery学习笔记
- 使用jquery.layout.js构建页眉/页脚/左侧导航/中间展示内容的网页结构
- 遮罩层模态框插件实现思路(jQuery)
- Jquery EasyUI动态生成Tab
- Jquery 操作 radio ,select 标签的操作
- 8个实现在线浏览PDF文件的实用jQuery插件
- jquery+javascript触发a标签的点击事件
- javascript模拟jQuery封装委托事件,兼容IE
- jquery 的ajax请求示例和注意事项