功能需求:
项目:基于浏览器的测评系统(答题系统)
需求:对答题时间进行控制,运用前端知识对测评进行倒计时功能。
(jquery-1.8.3.min.js/jquery.cookie.js)js框架,可以在jquery官网下载。
var surplusSeconds;// 剩余时间(秒) var si;// 倒计时排程 var totalMins = 120;// 试卷总答题时限(分钟) // 将剩余秒放入cookie中,便于关闭浏览器后,再打开后进入答题系统后,接着上次倒计时时间开始计时 function setSurplusSecondsToCookie(){ var cookietime = new Date(); cookietime.setTime(cookietime.getTime() + (60 * 60 * 1000 * 5));// coockie保存5小时 $.cookie("surplusSeconds", surplusSeconds, {expires:cookietime}); } // 从cookie中读出剩余秒 function getSurplusSecondsFromCookie(){ return $.cookie("surplusSeconds"); } // 倒计时 function timeoutFn(){ if(surplusSeconds == 0){// 剩余秒为0,自动提交试卷 submitPaper(); clearInterval(si); // 停止倒计时排程 $.cookie("surplusSeconds", null);// 清空cookie中的剩余秒 return; }else if(surplusSeconds == 5 * 60){ // 还剩5分钟,给出提醒 }else if(surplusSeconds == 15 * 60){ // 还剩15分钟,给出提醒 } surplusSeconds--; setSurplusSecondsToCookie(); // 设置剩余时间的显示 var seconds = surplusSeconds % 60; var surplusTimeHtml = Math.floor(surplusSeconds / 60) + "分" + (seconds < 10 ? ("0" + seconds) : (seconds)) + "秒"; $("#surplusTime").html(surplusTimeHtml); } $(function(){ if(getSurplusSecondsFromCookie()){// 若cooki存在剩余秒,则此剩余秒开始倒计时 surplusSeconds = getSurplusSecondsFromCookie(); }else{ surplusSeconds = totalMins * 60; } si = setInterval(timeoutFn, 1000); // 启动倒计时 });
相关推荐
日常开发中,电商经常使用到抢购,不过当抢购的时候会用到倒计时
利用js实现倒计时功能
用VBSCRIPT和JAVASCRIPT实现倒计时功能
倒计时功能插件js
vue混vue天时分秒倒计时效果 https://download.lllomh.com/cliect/#/product/F408496910757528
就是js、实现一个倒计时功能 显示结果如下: 距离2013年1月1号还有:25天。 天数会变动
利用jq实现倒计时功能,添加jquery.min.js js库的引用即可使用,代码有提示
js实现短信发送倒计时功能(正则验证).docx
vue实现倒计时功能 本文实例为大家分享了vue实现倒计时功能的具体代码,供大家参考,具体内容如下 通过父组件传入的结束时间减去当前日期得到剩余时间 <div class="itemend"> 倒计时<span>{{day}}天<span>{{...
jquery JS 倒计时 可调节倒计时的时间,格式
一款几行简单的js实现的倒计时功能.zip 一款几行简单的js实现的倒计时功能.zip 一款几行简单的js实现的倒计时功能.zip
本文主要介绍了通过js实现页面的倒计时功能的思路与方法,具有一定的参考价值,下面跟着小编一起来看下吧
js倒计时 JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的...js 倒计时是网站开发中常用的功能,也是用户常见的需求,本资源里面详细介绍了如何实现这一功能,有需要的朋友可以下载使用。
主要为大家详细介绍了基于Javascript实现倒计时功能的相关资料,感兴趣的小伙伴们可以参考一下
js 实现发送短信验证码后的倒计时功能 ajax前后端交互
倒计时-多种格式调用-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/> <link rel="icon" href="../public/image/favicon.png" type=...
H5网页,实现一个页面多个倒计时功能,类似于淘宝或者京东页面活动倒计时功能秒杀商品
ASP.NET实现从后端获取时间,前段javascript无刷新倒计时。
利用js实现倒计时的功能,在某个时间到达后会出现提示窗口