Vue实现考试倒计时(内含思路,效果图,代码,注释)
实现思路:通过考试结束时间,考试最大允许时长,考试开始时间、当前时间,计算出做题的可用时间,再利用定时器改变考试可用时间。实现效果如下:(界面请自行设计)代码如下:倒计时Html代码:<p :class="Time<60*10?'Time red':Time<60*20?'Time orange':'Time cadetblue'" v-if="Time!=null">&l
·
实现思路:
通过考试结束时间,考试最大允许时长,考试开始时间、当前时间,计算出做题的可用时间,再利用定时器改变考试可用时间。
实现效果如下:(界面请自行设计)
代码如下:
倒计时Html代码:
<p :class="Time<60*10?'Time red':Time<60*20?'Time orange':'Time cadetblue'" v-if="Time!=null"><span>{{Day}} 天 {{Hours}} 小时 {{Minutes}} 分钟 {{Seconds}} 秒</span></p>
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);
}
更多推荐
已为社区贡献2条内容
所有评论(0)