时分秒倒计时组件

template

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()

})

},