基于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 相关文章推荐
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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极大的增强功能和性能
2006/10/09 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
Django缓存Cache使用详解
2020/11/30 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
在线课程:Skillshare
2019/04/02 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
教师师德教育的自我评价
2013/10/31 职场文书
关于期中考试的反思
2014/02/02 职场文书
拾金不昧表扬信
2015/01/16 职场文书
个人培训总结
2015/03/05 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL