Created
August 21, 2018 10:16
-
-
Save TimRChen/25f11f241e84ebabd75055080a972575 to your computer and use it in GitHub Desktop.
simple count down handler for vue.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
// 未来的终止时间 2018.10.10 23:59:59 | |
const futureDate = new Date(2018, 10, 10, 23, 59, 59) | |
export default { | |
data () { | |
return { | |
time: { | |
day: '69', // String | |
hour: '59', // String | |
minute: '59', // String | |
seconds: '59' // String | |
} | |
} | |
}, | |
mounted () { | |
this.countDownComputer() // 初始化倒计时 | |
this.countDownMachine() // 开始倒计时 | |
}, | |
methods: { | |
addZero: num => num.toString().length === 1 ? `0${num}` : num, | |
formateCountDown () { | |
const time = this.time | |
return `${time.day} 天 ${time.hour} 时 ${time.minute} 分 ${time.seconds} 秒` | |
}, | |
// 倒计时计算器 | |
countDownComputer () { | |
let nowTime = Date.now() | |
const secondMinuend = 1000 | |
const minMinuend = 1000 * 60 | |
const hourMinuend = 1000 * 60 * 60 | |
const dayMinuend = 1000 * 60 * 60 * 24 | |
let countDownSeconds = futureDate - nowTime | |
const day = (countDownSeconds / dayMinuend).toFixed() | |
const hour = (countDownSeconds % dayMinuend / hourMinuend).toFixed() | |
const minute = (countDownSeconds % dayMinuend % hourMinuend / minMinuend).toFixed() | |
const seconds = (countDownSeconds % dayMinuend % hourMinuend % minMinuend / secondMinuend).toFixed() | |
if (day !== this.time.day) this.time.day = this.addZero(day) | |
if (hour !== this.time.hour) this.time.hour = this.addZero(hour) | |
if (minute !== this.time.minute) this.time.minute = this.addZero(minute) | |
if (seconds !== this.time.seconds) this.time.seconds = this.addZero(seconds) | |
}, | |
// 倒计时启动器 | |
countDownMachine () { | |
const vm = this | |
const perMinute = 1000 | |
setInterval(() => vm.countDownComputer(), perMinute) | |
} | |
} | |
} | |
</script> |
Author
TimRChen
commented
Mar 20, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment