用法看文件注释部分
<!--
本组件使用方式:
在需要使用 本组件 的 页面 的操作 如下
import Daojishi from "./daojishi"; // 此处引入 本组件 的 路径 自行配置
export default {
data() {
return {
aim_time: "2019-10-21 18:08:21" //此处自行从后端获取需要的目的时间,也可自己写一个 , 即该倒计时功能到 这个时间 则终止
};
},
components: {
Daojishi // 注册引入的组件
},
};
本组件采用props传参 方式,看具体情况也可以改成用vuex获取。
在 【该页面】 需要显示本组件的地方,放入该组件,假如下面这样 PS:该页面 指的是:在需要使用 本组件 的 页面
<Daojishi :msg=this.aim_time />
本组件只有功能,因为要用于不同的项目,故而没有设定样式,下面的div和span结构简单,如有需要,可以自己改变样式。
-->
<template>
<div>
<div class="time">
<span>{{this.day}}</span>天
<span>{{this.hour}}</span> 时
<span>{{this.min}}</span> 分
<span>{{this.sec}}</span> 秒
</div>
</div>
</template>
<script>
export default {
data() {
return {
// aim_time: String,
day: 0,
hour: 0,
min: 0,
sec: 0
};
},
props: {
msg: String
},
created() {
this.intervalId = setInterval(() => {
this.countDown(this.msg);
}, 50);
},
methods: {
//参数为 目的时间 即该倒计时功能到 这个时间 终止
countDown(aim_time) {
var myTime = new Date();
var now = myTime.getTime();
var end = new Date(Date.parse(aim_time.replace(/-/g, "/"))).getTime();
var leftTime = end - now;
var day, hour, min, sec, ms;
if (leftTime >= 0) {
day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
hour = Math.floor((leftTime / 1000 / 60 / 60) % 24); //需要显示天数 则用这一行 11天 10 时 41 分 14 秒
// hour = Math.floor(((leftTime / 1000 / 60 / 60) % 24) + day * 24); //如果不需要显示天数 则用这一行 243 时 41 分 14 秒
min = Math.floor((leftTime / 1000 / 60) % 60);
sec = Math.floor((leftTime / 1000) % 60);
ms = Math.floor(leftTime % 1000);
if (day < 10) {
day = "0" + day;
}
if (ms < 100) {
ms = "0" + ms;
}
if (sec < 10) {
sec = "0" + sec;
}
if (min < 10) {
min = "0" + min;
}
if (hour < 10) {
hour = "0" + hour;
}
} else {
alert("已截止");
}
this.day = day;
this.hour = hour;
this.min = min;
this.sec = sec;
// document.getElementById('millisec').innerHTML = ms //毫秒
}
},
beforeDestroy() {
//退出页面前关闭定时器
clearInterval(this.intervalId);
}
};
</script>
<style lang='scss' scoped>
</style>