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

原创

已于 2022-09-30 11:04:41 修改 · 4.4k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vue #js

于 2022-03-27 00:19:56 首次发布

实现思路：

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

实现效果如下：（界面请自行设计）
在这里插入图片描述

代码如下：

倒计时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("当前系统时间违规，请将系统时间调回正确系统时间！");
    //不结束考试，但是