• 在线考试系统无刷新倒计时设计方案


    在考试系统中难免会有倒计时提示,我们第一想到的是用js的settimeout

    但是发现一个问题如果页面刷新则重新倒计时,以下是我的解决方案:

    1.用settimeout每隔一秒触发一次

    2.用cookies在cookies中读取剩余时间
    以下是实现代码:

    js部分:

     1 <script language="javascript" type = "text/javascript">
    2 function GetCookieByName(name) {
    3 //获取cookie字符串
    4 var strCookie = document.cookie;
    5 //将多cookie切割为多个名/值对
    6 var arrCookie = strCookie.split("; ");
    7 var userId;
    8 //遍历cookie数组,处理每个cookie对
    9 for (var i = 0; i < arrCookie.length; i++) {
    10 var arr = arrCookie[i].split("=");
    11 //找到名称为name的cookie,并返回它的值
    12 if (name == arr[0]) {
    13 userId = arr[1];
    14 break;
    15 }
    16 }
    17 return userId;
    18 }
    19 function Change(m, s) {
    20 s = s - 1;
    21 if (s < 0) {
    22 s = 60 + s;
    23 m = m - 1;
    24 }
    25 if (m == 10 && s == 0) {
    26 alert("离答题结束还有10分钟,请尽快完成题目!");
    27 }
    28 document.getElementById("divtime").innerHTML = m + "分" + s + "秒";
    29 document.cookie = "m=" + m;
    30 document.cookie = "s=" + s;
    31 setTimeout(function() {
    32 Change(m,s);
    33 }, 1000);
    34 }
    35 window.onload = function() {
    36 //SetCookie(20, 20);
    37 var m = GetCookieByName("m");
    38 var s = GetCookieByName("s");
    39 Change(m, s);
    40
    41 }
    42 </script>

    .net后台部分:

    在后台代码中设置cookies值

    Response.Cookies["m"].Value =  strs[0];
    Response.Cookies["s"].Value = strs[1];



     

  • 相关阅读:
    vscode常用插件列表
    使用docker构建supervisor全步骤
    docker删除虚悬镜像(临时镜像文件)
    消息队列的对比
    ECharts使用:this.dom.getContext is not a function
    curl命令行请求
    工作工具清单
    《SQL优化入门》讲座总结
    初始化git库并配置自动部署
    php代码进行跨域请求处理
  • 原文地址:https://www.cnblogs.com/wlitsoft/p/2403934.html
Copyright © 2020-2023  润新知