When using vuejs components to create a countdown component, everything seems normal in the pc and Android environments. However, in the iOS environment, there seems to be an issue with obtaining the real count calculation as it returns NaN.
<template>
<div class="coutpage">
<div class="countheader">
</div>
<ul class="countdowmlist" v-if="!countdowndata.over">
<li v-text="countdowndata.days"></li>
<li>Days</li>
<li v-text="countdowndata.hours"></li>
<li>Hours</li>
<li v-text="countdowndata.minus"></li>
<li>Minutes</li>
<li v-text="countdowndata.second"></li>
<li>Seconds</li>
</ul>
<div class="isover" v-if="countdowndata.over">
Time's up
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: 'Countdown',
props: [ 'endDate' ],
data () {
return {
countdowndata: {
days: '0',
hours: '0',
minus: '0',
second: '0',
realcount: '0',
over: false
},
interval: {}
}
},
created () {
const counttime = new Date(this.endDate).getTime() - new Date().getTime()
if (counttime < 0) {
clearInterval(this.interval)
return
}
this.countdowndata.realcount = Math.floor(counttime / 1000)
const _this = this
this.interval = setInterval(function () {
_this.getCount()
}, 1000)
},
methods: {
getCount () {
var time = this.countdowndata.realcount
if (time <= 0) {
clearInterval(this.interval)
this.countdowndata.over = true
return
}
var days = Math.floor(time / 60 / 60 / 24)
var hours = Math.floor((time - days * 60 * 60 * 24) / 60 / 60)
var minus = Math.floor((time - days * 60 * 60 * 24 - hours * 60 * 60) / 60)
var second = Math.floor((time - days * 60 * 60 * 24 - hours * 60 * 60 - minus * 60))
hours = hours < 10 ? ('0' + hours) : hours
minus = minus < 10 ? ('0' + minus) : minus
second = second < 10 ? ('0' + second) : second
this.countdowndata.days = days
this.countdowndata.hours = hours
this.countdowndata.minus = minus
this.countdowndata.second = second
this.countdowndata.realcount--
}
}
}
</script>
View screenshot on PC or Android
I utilized the vuejs-cli along with webpack and vue-router for this project.