vue 手写倒计时，样式需要自己调。（ 亲测可用，就是没有样式 ）

先写一个 js 文件，这个文件是工具类文件，需要单独开一个js

// 计算出时间戳的具体数据：比如将85400转化为 n天n时n分n秒
export function formateTimeStamp(timeStamp) {
    var day;
    var hour;
    var min;
    var seconds;

    day = parseInt(timeStamp / (24 * 60 * 60)) // 计算整数天数
    var afterDay = timeStamp - day * 24 * 60 * 60 // 取得算出天数后剩余的秒数
    hour = parseInt(afterDay / (60 * 60)) // 计算整数小时数
    var afterHour = timeStamp - day * 24 * 60 * 60 - hour * 60 * 60 // 取得算出小时数后剩余的秒数
    min = parseInt(afterHour / 60) // 计算整数分
    seconds = parseInt(timeStamp - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60) // 取得算出分后剩余的秒数

    if (day < 10) {
        day = '0' + day;
    }

    if (hour < 10) {
        hour = '0' + hour
    };

    if (min < 10) {
        min = '0' + min;
    }

    if (seconds < 10) {
        seconds = '0' + seconds;
    }

    const restStamp = {
        day: day,
        hour: hour,
        min: min,
        seconds: seconds
    }
    return restStamp
}

　　

template 部分,就一行代码

<p v-html="countTxt"></p> //注意： countTxt 这个属性是绑定倒计时时间的

 

 

date部分

//倒计时

      times: {},

      countTxt: '', // 最后结果，需要以 2021-05-17 14:20:30 的格式传进去

      startTime : '', //获取本地的时间

      endTime : '', //后端传进来的时间

 

//获取时间并转换成秒
    getTime(time){
      var date = new Date(time)
      this.startTime = date.getTime() / 1000 ;
    },

    getTime1(time){
      this.endTime = ''

      //将分钟转换成 天 - 小时 - 分
      var day1 = parseInt(time/60/24);
      var hour1 = parseInt(time/60%24);
	    var min1 = parseInt(time % 60)

      var date = new Date()
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      day = day + day1
      hour = hour + hour1

      minute = minute + min1

      if(minute > 60 ){
        hour = hour + 1
        minute = minute - 60
      }

      if(hour > 24){
        day = day + 1
        hour = hour - 24
      }

      var currentTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
      var date2 = new Date(currentTime)
      this.endTime = date2.getTime() / 1000 ;

    },

    // 获得距离活动开始还剩余的时间
    mistiming () {

      // var timeStamp = this.infos.activity.end_at - this.infos.activity.start_at;
      // 本地时间转换成秒 - 减去传进来的时间转换成秒
      var timeStamp = this.endTime - this.startTime ;
      this.times = formateTimeStamp(timeStamp);
      const str = `<span>${this.times.day}</span>天<span>${this.times.hour}</span>时<span>${this.times.min}</span>分<span>${this.times.seconds}</span>秒`
      this.countTxt = str;
      var TimeDown = setInterval(() => {
        if (timeStamp > 0) {
          timeStamp--;
          const newTime = formateTimeStamp(timeStamp);
          const str = `<span>${newTime.hour}</span>时<span>${newTime.min}</span>分<span>${newTime.seconds}</span>秒`
          this.countTxt = str;
        } else {
          this.countTxt = '考试已结束'
          this.$message.success("考试已结束，试卷自动提交。")
          clearInterval(TimeDown);
        }
      }, 1000)
    },

　　

 

// 找个方法 或者 和后端请求回来的时间 放在一起
var date = new Date() // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear()
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
        var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + '')
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())
        var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();

        this.froms.startTime = Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s;

        this.getTime( this.froms.startTime )
        this.getTime1( this.form.time )
        this.mistiming();

// 注： this.froms.startTime this.form.time 这俩个变量需要自己创建