Vue实现考试倒计时（内含思路，效果图，代码，注释）

实现思路：

通过考试结束时间，考试最大允许时长，考试开始时间、当前时间，计算出做题的可用时间，再利用定时器改变考试可用时间。

实现效果如下：（界面请自行设计）

代码如下：

倒计时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);
}