首先我们来看需求，实现页面倒计时，关键是前端展示时分秒天，做好自己的倒计时函数，然后刷新页面 依然会从数据源中拿到后端时刻刷新的毫秒值，再进行倒计时，这样周而复始，就实现了。比较新颖的点在于，我写的这个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的生命周期先后加载有关系
标签：00,vue,hour,addZeroTime,cdn,list,second,html,minute From： https://www.cnblogs.com/coderwhytop/p/17157632.html