java 前端展时倒计时前端秒杀倒计时

转载

技术极客领袖 2023-09-28 23:16:53

文章标签 java 前端展时倒计时封装 html Code 文章分类 Java 后端开发

首先我们来看需求，实现页面倒计时，关键是前端展示时分秒天，做好自己的倒计时函数，然后刷新页面依然会从数据源中拿到后端时刻刷新的毫秒值，再进行倒计时，这样周而复始，就实现了。比较新颖的点在于，我写的这个html部分放到了js的定时器里，一秒生成一次。这里有三个列表，所以需要传参list和 i, i是每个列表的每一个商品。

java 前端展时倒计时前端秒杀倒计时_Code

java 前端展时倒计时前端秒杀倒计时_html_02

java 前端展时倒计时前端秒杀倒计时_java 前端展时倒计时_03

1  
 2 
 3 function addZeroTime(timer) {
 4 if (timer >= 0 && timer <= 9) {
 5 timer = '0' + timer.toString()
 6 }
 7 return timer
 8 }
 9 function getHTML(list, index) {
10 for (let i = 0; i < list.length; i++) {
11 setInterval(() => {
12 addZeroTime(list[i].hour)
13 addZeroTime(list[i].minute)
14 addZeroTime(list[i].second)
15 // addZeroTime(list[i].hour)
16 if (list[i].hour == 00) {
17 if (list[i].minute != 00 && list[i].second == 00) {
18 list[i].second = 59
19 list[i].minute -= 1
20 addZeroTime(list[i].hour)
21 addZeroTime(list[i].minute)
22 addZeroTime(list[i].second)
23 } else if (list[i].minute == 00 && list[i].second == 00) {
24 list[i].second = 00
25 console.log(list[i].second, '=0');
26 addZeroTime(list[i].hour)
27 addZeroTime(list[i].minute)
28 addZeroTime(list[i].second)
29 } else {
30 list[i].second -= 1
31 addZeroTime(list[i].hour)
32 addZeroTime(list[i].minute)
33 addZeroTime(list[i].second)
34 }
35 } else {
36 if (list[i].minute != 00 && list[i].second == 00) {
37 list[i].second = 59
38 list[i].minute -= 1
39 addZeroTime(list[i].hour)
40 addZeroTime(list[i].minute)
41 addZeroTime(list[i].second)
42 } else if (list[i].minute == 00 && list[i].second == 00) {
43 list[i].hour -= 1
44 list[i].minute = 59
45 list[i].second = 59
46 addZeroTime(list[i].hour)
47 addZeroTime(list[i].minute)
48 addZeroTime(list[i].second)
49 } else {
50 list[i].second -= 1
51 addZeroTime(list[i].hour)
52 addZeroTime(list[i].minute)
53 addZeroTime(list[i].second)
54 // console.log(list[i].second, '！=0');
55 }
56 }
57 if (document.getElementsByClassName(i + "LastWeek")[index]) {
58 // console.log(document.getElementsByClassName(i + "LastWeek")[index]);
59 document.getElementsByClassName(i + "LastWeek")[index].innerHTML =
60 `<span class="countdown-section">
61 <div>${list[i].day}</div>
62 <div>days</div>
63 </span>
64 <span class="countdown-section">
65 <div>${list[i].hour}</div>
66 <div>hours</div>
67 </span>
68 <span class="countdown-section">
69 <div>${list[i].minute}</div>
70 <div>mins</div>
71 </span>
72 <span class="countdown-section">
73 <div>${list[i].second}</div>
74 <div>secs</div>
75 </span>`
76 }
77  
78 
79 }, 1000);
80 }
81 }

View Code

同理，既然一套电商网站的头部和底部是一样的，依然可以封装一个html生成的函数，放到created里面，每个页面的逻辑不能封装，这里我还不太会，因为this指向每个页面的Vue对象。不过这样之后维护只需要修改封装好的html就可以了。如下：

java 前端展时倒计时前端秒杀倒计时_封装_04

java 前端展时倒计时前端秒杀倒计时_html_05

里面即使需要循环也没关系，需要的变量不需要写${item}的模板变量形式，这和vue的生命周期先后加载有关系

java 前端展时倒计时前端秒杀倒计时_java 前端展时倒计时_06