vue 倒计时 插件_vue中实现倒计时组件与毫秒效果
時分秒倒計時組件
template
{{ getHours1 }}
{{ getHours2 }}
:
{{ getMinutes1 }}
{{ getMinutes2 }}
:
{{ getSeconds1 }}
{{ getSeconds2 }}
{{clocker}}
script
export default {
name: 'downTime',
props: { // 接收父組件傳遞過來的參數,這里傳了 結束時間 - 開始時間 - 結束后顯示的內容
endTime: {
type: Number
},
startTime: {
type: Number
},
endMsg: {
type: String
}
},
data () {
return {
isShow: false, // 控制顯示結束或還未結束顯示的內容
clocker: '', // 結束后顯示的內容
timeObj: null, // 時間對象,下方會用到
myDay: 0, // 我定義來接收計算出來的 天 的
myHours: 0, // 我定義來接收計算出來的 小時 的
myMinutes: 0, // 我定義來接收計算出來的 分鐘 的
mySeconds: 0// 我定義來接收計算出來的 秒鐘 的
}
},
computed: {
getHours1 () {
return this.myHours < 10 ? 0 : parseInt((this.myHours % 100) / 10)
},
getHours2 () {
return parseInt(this.myHours % 10)
},
getMinutes1 () {
return this.myMinutes < 10 ? 0 : parseInt((this.myMinutes % 100) / 10)
},
getMinutes2 () {
return parseInt(this.myMinutes % 10)
},
getSeconds1 () {
return this.mySeconds < 10 ? 0 : parseInt((this.mySeconds % 100) / 10)
},
getSeconds2 () {
return parseInt(this.mySeconds % 10)
}
},
mounted () {
},
methods: {
option () {
// 計算時間差
let timeLag = (this.endTime - this.startTime) / 1000
// 判斷當前是否時分秒的值是否大于10
const add = num => {
return num < 10 ? '0' + num : num
}
// 時間倒計時運算的方法
const timeFunction = () => {
const time = timeLag--
this.timeObj = { // 時間對象
seconds: Math.floor(time % 60),
minutes: Math.floor(time / 60) % 60,
hours: Math.floor(time / 60 / 60) % 24,
days: Math.floor(time / 60 / 60 / 24)
}
// 計算出時分秒
this.myDay = `${add(this.timeObj.days)}`
this.myHours = `${add(this.timeObj.hours)}`
this.myMinutes = `${add(this.timeObj.minutes)}`
this.mySeconds = `${add(this.timeObj.seconds)}`
// 當時間差小于等于0時,停止倒計時
if (time <= 0) {
this.isShow = true
this.clocker = this.endMsg
clearInterval(go)
}
}
// 開始執行倒計時
timeFunction()
// 每一秒執行一次
const go = setInterval(() => {
timeFunction()
}, 1000)
}
},
watch: {
endTime: {
handler (newName, oldName) {
this.option()
},
immediate: true,
deep: true
}
}
}
備注：我將時分秒使用計算屬性分成了個位和十位兩部分展示，在watch中深度監聽endTime屬性的變化并重新調用定時器
style
.downTime-wrapper{
display: inline-block;
.dian {
font-weight: bold;
position: relative;
top: -5px;
}
.hour{
display: inline-block;
font-size: 36px;
span {
border-radius:6px;
color: #FFFFFF;
background:rgba(27,23,22,1);
padding: 1px 10px;
margin: 0 2px;
}
}
.minute{
display: inline-block;
font-size: 36px;
span {
border-radius:6px;
color: #FFFFFF;
background:rgba(27,23,22,1);
padding: 1px 10px;
margin: 0 2px;
}
}
.second {
display: inline-block;
font-size: 36px;
margin-top: -5px;
span {
border-radius:6px;
color: #FFFFFF;
background:rgba(27,23,22,1);
padding: 1px 10px;
margin: 0 2px;
}
}
}
使用
在頁面中引入并注冊后即可使用
:endTime="item.endTime"
:startTime="new Date().getTime()"
:endMsg="item.endMsg">
毫秒倒計時效果
在template中加入
:00
聲明timeDt方法
methods: {
timeDt () {
this.timer1 = setTimeout(function () {
var haomiao = 99
document.getElementById('timehs').innerHTML = ':' + haomiao
this.timer2 = setInterval(function () {
const timehs = document.getElementById('timehs')
if (timehs) {
timehs.innerHTML = `:${haomiao < 10 ? `0${haomiao}` : haomiao}`
}
haomiao--
if (haomiao < 0) {
haomiao = 99
}
}, 10)
}, 1000)
}
}
在create生命周期函數中調用timeDt方法
created () {
this.$nextTick(() => {
this.timeDt()
})
},
總結
以上是生活随笔為你收集整理的vue 倒计时 插件_vue中实现倒计时组件与毫秒效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高德地图定位误差_【“怼”上了，四川景区
- 下一篇： vue一级分类和耳机分类_【Vue+DR