(ios不认横杠—— 自己做个兼容写成/斜杠,兼容方式就不说了,转换就好了,判断是不是ios看我其他博文)
当前文件请开一个新的vue页面保存,作为组件试用
<template>
<p>{{time}}</p>
</template>
<script>
export default{
data () {
return {
time : '',
flag : false
}
},
mounted () {
let time = setInterval(()=>{
if(this.flag == true){
clearInterval(time)
}
this.timeDown()
},500)
},
props : {
endTime : {
type : String
}
},
methods : {
timeDown () {
const endTime = new Date(this.endTime)
const nowTime = new Date();
let leftTime = parseInt((endTime.getTime()-nowTime.getTime())/1000)
let d = parseInt(leftTime/(24*60*60))
let h = this.formate(parseInt(leftTime/(60*60)%24))
let m = this.formate(parseInt(leftTime/60%60))
let s = this.formate(parseInt(leftTime%60))
if(leftTime <= 0){
this.flag = true
this.$emit('time-end')
}
this.time = `${d}天${h}小时${m}分${s}秒` // 需要修改时间样式的话 ,比如需要什么30分钟倒计时,就只保留分和秒
},
formate (time) {
if(time>=10){
return time
}else{
return `0${time}`
}
}
}
}
</script>
<style scoped>
</style>
上面是一个组件哦 同志们。。。。
下面是引用在你需要的页面里面的东西 请不要搞混,上面是组件,下面是引用
<template>
<div>
<zk-time-down :endTime='endTime'></zk-time-down>
</div>
</template>
<script>
import zkTimeDown from './HomeTimer' // 引入倒计时
data() {
return {
endTime : '2018-08-29 9:51:00' // 设置定时器倒计时,时间必须大于当前时间 和上面一样,跟上面对应
}
},
</script>
够明白了吧。亲们。。