首先我们来看需求，实现页面倒计时，关键是前端展示时分秒天，做好自己的倒计时函数，然后刷新页面 依然会从数据源中拿到后端时刻刷新的毫秒值，再进行倒计时，这样周而复始，就实现了。比较新颖的点在于，我写的这个html部分放到了js的定时器里，一秒生成一次。这里有三个列表，所以需要传参list和 i, i是每个列表的每一个商品。
function addZeroTime(timer) {
if (timer >= 0 && timer <= 9) {
timer = ‘0‘ + timer.toString()
}
return timer
}
function getHTML(list, index) {
for (let i = 0; i < list.length; i++) {
setInterval(() => {
addZeroTime(list[i].hour)
addZeroTime(list[i].minute)
addZeroTime(list[i].second)
// addZeroTime(list[i].hour)
if (list[i].hour == 00) {
if (list[i].minute != 00 && list[i].second == 00) {
list[i].second = 59
list[i].minute -= 1
addZeroTime(list[i].hour)
addZeroTime(list[i].minute)
addZeroTime(list[i].second)
} else if (list[i].minute == 00 && list[i].second == 00) {
list[i].second = 00
console.log(list[i].second, ‘=0‘);
addZeroTime(list[i].hour)
addZeroTime(list[i].minute)
addZeroTime(list[i].second)
} else {
list[i].second -= 1
addZeroTime(list[i].hour)
addZeroTime(list[i].minute)
addZeroTime(list[i].second)
}
} else {
if (list[i].minute != 00 && list[i].second == 00) {
list[i].second = 59
list[i].minute -= 1
addZeroTime(list[i].hour)
addZeroTime(list[i].minute)
addZeroTime(list[i].second)
} else if (list[i].minute == 00 && list[i].second == 00) {
list[i].hour -= 1
list[i].minute = 59
list[i].second = 59
addZeroTime(list[i].hour)
addZeroTime(list[i].minute)
addZeroTime(list[i].second)
} else {
list[i].second -= 1
addZeroTime(list[i].hour)
addZeroTime(list[i].minute)
addZeroTime(list[i].second)
// console.log(list[i].second, ‘！=0‘);
}
}
if (document.getElementsByClassName(i + "LastWeek")[index]) {
// console.log(document.getElementsByClassName(i + "LastWeek")[index]);
document.getElementsByClassName(i + "LastWeek")[index].innerHTML =
`<span class="countdown-section">
<div>${list[i].day}</div>
<div>days</div>
</span>
<span class="countdown-section">
<div>${list[i].hour}</div>
<div>hours</div>
</span>
<span class="countdown-section">
<div>${list[i].minute}</div>
<div>mins</div>
</span>
<span class="countdown-section">
<div>${list[i].second}</div>
<div>secs</div>
</span>`
}
}, 1000);
}
}
同理，既然一套电商网站的头部和底部是一样的，依然可以封装一个html生成的函数，放到created里面，每个页面的逻辑不能封装，这里我还不太会，因为this指向每个页面的Vue对象。不过这样 之后维护只需要修改封装好的html就可以了。如下：
里面即使需要循环也没关系，需要的变量不需要写${item}的模板变量形式，这和vue的生命周期先后加载有关系
怎么样，是不是很方便，喜欢的话给小曹点个赞吧?? 谢谢支持