如何实现页面倒计时秒杀功能 并保持数据与后端一致 html cdn vue模式下动态创建公共元素

首先我们来看需求，实现页面倒计时，关键是前端展示时分秒天，做好自己的倒计时函数，然后刷新页面 依然会从数据源中拿到后端时刻刷新的毫秒值，再进行倒计时，这样周而复始，就实现了。比较新颖的点在于，我写的这个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的生命周期先后加载有关系

怎么样，是不是很方便，喜欢的话给小曹点个赞吧