This article is a countdown for each of the multiple products, which is similar to group buying. At the beginning, it was a headache for a while when you received this demand. If you were to write a dead, fixed variable, and write a few timers, it would be OK.
But this time the data is alive, and you can see some group buying apps to implement. Since it can be implemented, you can start. I have the following ideas to use the environment vue
Write a dead data ready to render
data () {
return {
list: [ // Prepare rendered data {
remainTime: 900000, // How long is it to end remainTimeStr: '' // Display the document },
{
remainTime: 400000,
remainTimeStr: ''
},
{
remainTime: 60500,
remainTimeStr: ''
},
]
}
}
A countdown method for Baidu copy
countdowm (timestamp) {
let self = this
let timer = setInterval(function () {
let nowTime = new Date()
let endTime = new Date(timestamp)
let t = () - ()
if (t > 0) {
let day = (t / 86400000)
let hour = ((t / 3600000) % 24)
let min = ((t / 60000) % 60)
let sec = ((t / 1000) % 60)
hour = hour < 10 ? '0' + hour : hour
min = min < 10 ? '0' + min : min
sec = sec < 10 ? '0' + sec : sec
let format = ''
if (day > 0) {
format = `${day}sky${hour}Hour${min}point${sec}Second`
}
if (day <= 0 && hour > 0) {
format = `${hour}Hour${min}point${sec}Second`
}
if (day <= 0 && hour <= 0) {
format = `${min}point${sec}Second`
}
= format
} else {
clearInterval(timer)
= 'over'
}
}, 1000)
}
Clear the logic
First, change the countdown method according to logic. We directly use the timestamp of how many times there is to end. My idea is to use a timer to achieve multiple countdowns in parallel, so we optimize the method first.
- No time required
- It doesn't take some time to calculate
- Because it is multiple countdowns in parallel, it is clear that the logic of the timer needs to be changed
countdowm (timestamp) {
let self = this
let timer = setInterval(function () {
let t = timestamp
if (t > 0) {
let day = (t / 86400000)
let hour = ((t / 3600000) % 24)
let min = ((t / 60000) % 60)
let sec = ((t / 1000) % 60)
day = day < 10 ? '0' + day : day
hour = hour < 10 ? '0' + hour : hour
min = min < 10 ? '0' + min : min
sec = sec < 10 ? '0' + sec : sec
let format = ''
format = `${day}sky${hour}Hour${min}point${sec}Second`
= format
} else {
// clearInterval(timer)
= 'over'
}
}, 1000)
}
Simplify it, bring your thoughts into the method
Write a loop in the timer to reduce one second each time, and let the remaining Time stamp in the current data -1000
countdown () {
let self = this
let timer = setInterval(function () {
for (let i = 0; i < ; i++) {
[i].remainTime -= 1000
let t = [i].remainTime
if (t > 0) {
let day = (t / 86400000)
let hour = ((t / 3600000) % 24)
let min = ((t / 60000) % 60)
let sec = ((t / 1000) % 60)
day = day < 10 ? '0' + day : day
hour = hour < 10 ? '0' + hour : hour
min = min < 10 ? '0' + min : min
sec = sec < 10 ? '0' + sec : sec
let format = ''
format = `The distance ends：<b>${day}</b> sky <b>${hour}</b>
hour <b>${min}</b> point <b>${sec}</b> Second`
[i].remainTimeStr = format
} else {
// Make a judgment If all countdowns in the data have ended, then the timer will be terminated. If not, then the timer will be executed. let flag = ((val, ind) =>
<= 0)
if (flag) clearInterval(timer)
[i].remainTimeStr = `The distance ends：<b>00</b> sky
<b>00</b> hour <b>00</b> point <b>00</b> Second` // End the document }
}
}, 1000)
}
This way, multiple timers are done in parallel, but a problem was discovered. When you switch routes, send your timer if it is not finished, and it is still executing. This has some impact on performance. Although the user cannot see it, it must also be solved to improve the user's browsing experience.
When you switch pages, use the lifecycle function in vue to change the data to 0.
destroyed () {
((val) => {
= 0
})
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.