脚本宝典收集整理的这篇文章主要介绍了倒计时，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
<template>
<div class="countDown">
<div v-if="!isCountDownOver">
<span class="time">{{ countDownD }}</span>
<span class="time">{{ countDownHour }}</span>
<span class="time">{{ countDownMinutes }}</span>
<span class="time">{{ countDownSeconds }}</span>
</div>
<div v-else class="timeOver">{{ LANG.test1.desc271 }}</div>
</div>
</template>
<script>
export default {
name: "countDown",
data() {
return {
isCountDownOver: false,
countDownD: "00",
countDownHour: "00",
countDownMinutes: "00",
countDownSeconds: "00",
};
},
mounted() {
this.timer();
},
methods: {
// 时间格式化
timeFormat(param) {
return param < 10 ? "0" + param : param;
},
// 倒计时功能
timer() {
// new Date() 可自定义为抢购时间
let failTime = new Date("2021-12-25 00:00:00").getTime() + 1 * 60 * 1000; //到期时间
let nowTime = new Date().getTime(); // 当前时间
let leftTime = failTime - nowTime;//剩余时间
let interval = setInterval(() => {
let timeObj = {};
leftTime = leftTime - 1000;
if (leftTime > 0) {
let d= parseInt(leftTime / 1000 / 60 / 60 / 24);
let hour = parseInt((leftTime / 1000 / 60 / 60) % 24);
let minutes = parseInt((leftTime / 1000 / 60) % 60);
let seconds = parseInt((leftTime / 1000) % 60);
timeObj = {
d: this.timeFormat(d),
hour: this.timeFormat(hour),
minutes: this.timeFormat(minutes),
seconds: this.timeFormat(seconds),
};
} else {
this.isCountDownOver = true;
clearInterval(interval); // 清除定时器
}
this.countDownD=timeObj.d;
this.countDownHour = timeObj.hour;
this.countDownMinutes = timeObj.minutes;
this.countDownSeconds = timeObj.seconds;
}, 1000);
},
},
};
</script>
<style lang="less" scoped>
.countDown {
width:100%;
font-size: .25rem;
margin: .1rem auto;
}
.countDown .title {
font-weight: 700;
color: #ffffff;
margin-right: .05rem;
}
.countDown .time {
background-color: #2d67a3;
color: #fff;
margin: 0 .02rem;
padding: 0 .05rem;
border-radius: .03rem;
}
.timeOver {
text-align: center;
font-weight: 700;
color: #ffffff;
}
</style>
脚本宝典总结
以上是脚本宝典为你收集整理的倒计时全部内容，希望文章能够帮你解决倒计时所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。