在线考试系统(一)---JS倒计时cookie防刷新

年前给公司做了个在线答题系统，需要在考试页面上显示倒计时。之前有用过别的在线考试系统，有的系统刷新计时就会重新开始，这对答题者是很好，可以用来作弊，
实际上却是个Bug，所以需要结合cookie，当然如果清掉cookie重新计时那我就没办法了╮(￣▽￣”)╭。
按照本宝宝的一贯风格，我又来粗暴的晒代码啦！

    $(function() {
        var _minute = parseInt("${test.timeLimit}");
        var _expiresHours = _minute * 60 * 1000;

        if(!hasSetCookie()){
            addCookie("${test.id}", _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] == "${test.id}") {
                return true;
            }
        };
        return false;
    }
    //开始倒计时
    function settime(remainTime) {
        var _countdown = parseInt(getCookieValue("${test.id}")) / 1000;

        if (_countdown <= 0) {
            warn("提示!","考试时间到！");
            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("${test.id}", _countdown * 1000, _countdown * 1000);
        }
        //每1000毫秒执行一次
        setTimeout(function() {
            settime(remainTime);
        }, 1000);
    };

        // 结束考试
    function endExam(){
        $("#btnSubmit").trigger("click");
    }
        // 添加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;
            };
        };
    }

上面有一些id是写在HTML标签里的，例如

<div id="remainTime" style="position:fixed; top:60px; right: 0;width: 60px; height: 30px;color: #FF4040; background: #E0FFFF;"></div>

考试时间到结束考试，就要代码自动提交“确认”的这个按钮来交卷

<input id="btnSubmit" class="btn btn-primary" type="submit" value="确认"/>&nbsp;

细心的楼主发现，在上面的代码中有一个提示函数warn()，就是考试时间到那个，可以用alert函数代替，想要高大上的效果，也可以用warn()这个函数，我愿意无私的奉献出来~~~（反正也不是我自己写的，是下载的框架里自带的，吼吼）

// 提示框
        function warn(title,content){
            $.alert({
                title: title,
                content: content,
                icon: 'fa fa-rocket',
                animation: 'zoom',
                closeAnimation: 'zoom',
                buttons: {
                    okay: {
                        text: '确定',
                        btnClass: 'btn-primary'
                    }
                }
            });
            return;
        }

倒计时防止刷新的功能到此就实现了，这里有一个问题，一般倒计时都需要固定在顶部的，不管滚动条滚动到页面的任何位置，这个的实现方法请参见下一篇博文http://blog.csdn.net/Yolanda_NuoNuo/article/details/58135147。
在线考试系统中，cookie很重要，页面异常关闭会导致之前填写的答案清空，所以下下下一篇http://blog.csdn.net/yolanda_nuonuo/article/details/58588513将会介绍如何将答案存储在cookie中，在页面关闭以后再返回这个页面时，之前选择的答案还在。