基于jQuery+Cookie实现的防止刷新的在线考试倒计时


Posted in Javascript onJune 19, 2015

基于jQuery+Cookie实现的防止刷新的在线考试倒计时

$(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;
        };
      };
    }

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 动态生成方法的例子
Jul 22 Javascript
JS的反射问题
Apr 07 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
js断点调试经验分享
Dec 08 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 #Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 #Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 #Javascript
javascript格式化日期时间方法汇总
Jun 19 #Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 #Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 #Javascript
js结合正则实现国内手机号段校验
Jun 19 #Javascript
You might like
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
详解JS函数重载
2014/12/04 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
python逆序打印各位数字的方法
2018/06/25 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python实现飞机大战小游戏
2019/11/08 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
领导调研接待方案
2014/02/27 职场文书
预备党员的自我评价
2014/03/12 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
给朋友的道歉短信
2015/05/12 职场文书
运动会开幕式主持词
2015/07/01 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
python关于集合的知识案例详解
2021/05/30 Python