前言

本文章將發(fā)布vue實(shí)現(xiàn)倒計時定時器，可用于考試系統(tǒng)自動交卷、商城未付款倒計時取消訂單等效果

同時，如不清楚vue時間處理，可查看我上一個文章
vue時間處理

倒計時定時器

為了制作倒計時定時器，還需要將時分秒轉(zhuǎn)時間戳
注意：一般倒計時皆為HH:mm:ss 時分秒形式，本方法不適用于年月日 時分秒的形式，如需要，則需要根據(jù)我本篇文章進(jìn)行改造。處理時間的代碼

以下為制造倒計時效果代碼 <template> // 顯示剩余時間<div style="border: 1px solid gray">{{ restTime}}</div> </template><script> export default {name: "xxx",data () {return {restTime: "", // 剩余時間startDataTime: "2022-06-09 20:00:00", // 開始時間，自己設(shè)置或數(shù)據(jù)庫獲取endDataTime: "2022-06-09 21:00:00", // 結(jié)束時間，自己設(shè)置或數(shù)據(jù)庫獲取timeStamp: null, // 接收剩余時間戳timer: null}},methods: {// 時間戳轉(zhuǎn)時分秒toHHmmss (data) {var s;var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60));var seconds = (data % (1000 * 60)) / 1000;s = (hours < 10 ? ('0' + hours) : hours) + ':' + (minutes < 10 ? ('0' + minutes) : minutes) + ':' + (seconds < 10 ? ('0' + seconds) : seconds);if (s.length>8){s= s.slice(0,8)}return s;},// 時分秒轉(zhuǎn)時間戳toTimeStamp(date) {var s = "";var hour = date.split(":")[0];var min = date.split(":")[1];var sec = date.split(":")[2];s = Number(hour * 3600) + Number(min * 60) + Number(sec);s = s*1000return s;},// 初始化獲取時間getRestTime () {// 賦值轉(zhuǎn)時分秒this.restTime = this.toHHmmss(this.timeStamp);// 所以不是大于0秒if (this.timeStamp>= 1000) {// 1000為一秒// 如果大于1秒this.timeStamp = this.timeStamp -1000;} else {// 倒計時最后一秒將剩余時間修改this.restTime= "00:00:00";// 清除定時器clearInterval(this.timer)// 在這里編寫考試交卷或自動取消訂單的功能console.log("結(jié)束定時器!");}}},// 獲取時間差長度只需要做一次created() {// 處理字符串為時間類型let startTime = Date.parse(this.startDataTime.replace(/-/g,"-"));let endTime = Date.parse(this.endDataTime.replace(/-/g,"-"));// 調(diào)用moment插件計算時間差(做完這一步timeStamp為時間戳了)this.timeStamp = this.$moment(endTime).diff(this.$moment(startTime));},// 計算mounted () {// 倒計時,每一秒執(zhí)行一次if(this.timer)clearInterval(this.timer) this.timer = setInterval(this.getRestTime,1000)},// 退出頁面清除定時器beforeDestroy() {clearInterval(this.timer);} } </script><style></style>

注意事項(xiàng)

// 調(diào)用moment插件計算時間差 const time = this.$moment(this.endTime).diff(this.$moment(new Date()));

要使用以上代碼的話需要安裝對應(yīng)的moment插件
安裝命令:

npm install moment

然后在main.js文件里引入

import moment from "moment"; moment.locale('zh-cn'); Vue.prototype.$moment = moment

重要:

經(jīng)過反饋，發(fā)現(xiàn)以前的代碼報NaN錯誤，檢查發(fā)現(xiàn)，不能將時間戳獲取直接把獲取到的時間轉(zhuǎn)掉， 否則第二秒執(zhí)行會報錯。 于是，我重新寫了一個測試頁面驗(yàn)證，并進(jìn)行了簡化，當(dāng)前的代碼為驗(yàn)證過可執(zhí)行的； 因?yàn)楹臀艺巾?xiàng)目的有差別，所有單純只是計時，并沒有做功能。

截圖

以下截圖為上面代碼的驗(yàn)證頁面

以下截圖為本人項(xiàng)目中實(shí)際效果截圖

結(jié)語

以上，為倒計時定時器邏輯代碼

總結(jié)

以上是生活随笔為你收集整理的vue实现倒计时定时器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。