<template> <span> <i v-text="msg"></i> </span></template><script> export default { name: "Timer", props: ['time'], // 接收 时间为秒 data() { return { msg: '', timer: null, myTime: null, } }, components: {}, mounted() { this.myTime = this.time; this.start(); }, methods: { start() { if (this.myTime == 0) { this.msg = '00:00'; this.$emit('callback') clearTimeout(this.timer) this.timer = null; } else { this.msg = this.getText(this.myTime); this.myTime--; this.timer = setTimeout(() => { this.start(); }, 1000) } }, zero: function (n) { // 补0 var n = parseInt(n, 10); if (n > 0) { if (n <= 9) { n = "0" + n; } return String(n); } else { return "00"; } }, getText(time) { let year, month, day, hour, mini, sec; if (time > 0) { sec = this.zero(time % 60); mini = Math.floor((time / 60)) > 0 ? this.zero(Math.floor((time / 60)) % 60) : "00"; hour = Math.floor((time / 3600)) > 0 ? this.zero(Math.floor((time / 3600)) % 24) : "00"; day = Math.floor((time / 86400)) > 0 ? this.zero(Math.floor((time / 86400)) % 30) : "00"; //月份，以实际平均每月秒数计算 month = Math.floor((time / 2629744)) > 0 ? this.zero(Math.floor((time / 2629744)) % 12) : "00"; //年份，按按回归年365天5时48分46秒算 year = Math.floor((time / 31556926)) > 0 ? Math.floor((time / 31556926)) : "0"; return `${mini}:${sec}` } else { return '00:00' } } } }</script><style type="text/scss" scoped lang=""></style>
<template>
<div>
<div>
<timer :time="time1" @callback="getMark1"></timer>
</div>
<div>
<timer :time="time2" @callback="getMark2"></timer>
</div>
</div>
</template>
<script>
import timer from '@/components/Timer'
export default {
name: "Sign",
data() {
return {
time1:121, // 单位 秒
time2: 30,
}
},
components: {timer},
mounted() {
},
methods: {
getMark1 () {
console.log('1111')
},
getMark2() {
console.log('2222')
}
}
}
</script>
<style scoped lang="">
</style>
转载于:https://www.cnblogs.com/tengrl/p/10790669.html
相关资源：vue时钟组件
