js实现倒计时功能
功能需求:
项目:基于浏览器的测评系统(答题系统)
需求:对答题时间进行控制,运用前端知识对测评进行倒计时功能。
(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); // 启动倒计时 });
相关推荐
阿斌Elements 2020-06-11
88274956 2020-11-03
Zhongmeishijue 2020-09-10
runner 2020-09-01
梦的天空 2020-08-25
IdeaElements 2020-08-19
luvhl 2020-08-17
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
lyqdanang 2020-08-16
NARUTOLUOLUO 2020-08-03
MyNameIsXiaoLai 2020-07-08
星辰的笔记 2020-07-04
csstpeixun 2020-06-28
letheashura 2020-06-26
liaoxuewu 2020-06-26
OldBowl 2020-06-26
北京老苏 2020-06-25
Luffyying 2020-06-25