Vue实现考试倒计时（内含思路，效果图，代码，注释） |
您所在的位置：网站首页 › vue实现倒计时功能 › Vue实现考试倒计时（内含思路，效果图，代码，注释） |
Vue实现考试倒计时（内含思路，效果图，代码，注释）
|
实现思路： 通过考试结束时间，考试最大允许时长，考试开始时间、当前时间，计算出做题的可用时间，再利用定时器改变考试可用时间。 实现效果如下：（界面请自行设计） 代码如下： 倒计时Html代码： {{Day}} 天 {{Hours}} 小时 {{Minutes}} 分钟 {{Seconds}} 秒 Vue中的JS代码： //vue的data中有Time、Day、Hours、Minutes 、Seconds ，分别表示，考试可用时间，天，小时，分钟，秒 //当前时间 考试结束时间 考试时长 考试开始时间 var nowTime = new Date().getTime(); //this.Exam是后台获取的试卷对象信息 var endTime = this.Exam.EndTime; var longTime = this.Exam.LongTime; //this.CreateTime是本次考试记录的创建时间，也就是本次考试的开始时间 var startTime = new Date(this.CreateTime).getTime(); if(nowTime < startTime){ alert("当前系统时间违规，请将系统时间调回正确系统时间！"); //不结束考试，但是返回其他界面，不允许考试 location.href='./Myself.html'; } //试卷不一定设置了考试的结束时间，所以要判断一下，否则默认是null if(endTime != null){ endTime = new Date(endTime).getTime(); //转换成Date之后在获取毫秒数 // endTime.substring(0,3),endTime.substring(5,6),endTime.substring(8,9),endTime.substring(11,12),endTime.substring(14,15),'00' } //同理，试卷不一定设置了本次考试时长，所以也要判断一下，否则为null if(longTime != null){ //原longTime以分钟为单位，现在转换成秒 longTime = longTime * 60; //获取总共考试时长 //当前时间减去本次考试记录创建的时间，就是考试已经用过的时间，要减去，否则刷新界面，考试时间又会变回最初值 var wasteTime = parseInt((nowTime - startTime)/1000) ; longTime = longTime-wasteTime; // longTime = longTime - wasteTime; } //如果任何考试限制都没有设置，则Time为bull保持不变，不自动提交考试 if(longTime == null && endTime == null){ } else if(longTime != null && (longTime < (endTime - nowTime)/1000 || endTime == null)){ //距离考试结束时间还长，但是有最大考试时限，则将考试时间设置为考试时限 this.Time = longTime; } else if((endTime - nowTime)/1000 < longTime && longTime != null && endTime != null){ //设置了考试结束时间，也设置了最大考试时间，但是考试结束时间已经比考试最大时限还小，根据考试结束时间减去当前时间得出秒数 this.Time = (endTime - nowTime)/1000 }else if(endTime != null){ //只设置了考试结束时间，但是没有设置考试最大时限，根据考试结束时间减去当前时间得出秒数 this.Time = (endTime - nowTime)/1000; } if(this.Time < 0){ //不排除是很久以前的考试，在前面的计算中会得出负数，但是一直没做，给他留10秒看题 this.Time = 0; } if(this.Time != null){ //得出最终的 this.Day = parseInt(this.Time/(24*3600)); this.Hours = parseInt(this.Time%(24*3600)/3600); this.Minutes = parseInt(this.Time%(3600)/60); this.Seconds = parseInt(this.Time%(60)); } if(this.Time != null){ //考试倒计时 //console.log(this.Time); //定时器计算考试剩余 时间 var timer = setInterval(()=>{ this.Time = this.Time - 1; if(this.Time != null && this.Time > 0){ //获取考试剩余 天数 小时 分钟 秒数 this.Day = parseInt(this.Time/(24*3600)); this.Hours = parseInt(this.Time%(24*3600)/3600); this.Minutes = parseInt(this.Time%(3600)/60); this.Seconds = parseInt(this.Time%(60)); }else{ clearInterval(timer); //考试结束，提交试卷 // console.log("提交试卷"); } },1000); }
|
【本文地址】
今日新闻 |
推荐新闻 |