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

查了些资料整理如下：

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);
        };

        //时添加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;
                };
            };
        }

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>

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

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