小程序搶購頁面倒計時定時器

from：我是前端美少女😔

前幾天公司要求做一個搶購頁面，要求每個產品都需要一個定時器。之前一個頁面做一個定時器輕輕松松，現在涉及多個定時器，而且數量還不確定。如果使用土辦法每個商品一個函數，這樣是行不通的。因此，只能使用一個函數來實現多個定時器。

實現效果

只顯示定時器的效果，至于商品信息的布局就不展示

整體思路

將每個商品的結束時間合并到一個數組中
遍歷數組，依次計算每個商品的倒計時時間
每秒執行一次并渲染頁面

代碼實現

一、timer.wxml

// Timer/timer.wxml <view class="time" wx:for='{{goodlist}}' wx:for-item="item" wx:key="key"><text class="end">距結束</text><span wx:if="{{item.day > 0}}" style="width:auto">{{item.day}}</span><em wx:if="{{item.day > 0}}">天</em><span style="width:auto">{{item.hour}}</span><em>:</em><span>{{item.min}}</span><em>:</em><span>{{item.sec}}</span> </view>

二、timer.wxss

.time{float: left;margin-top: 10rpx;width: 100%;padding: 10rpx 50rpx; } .time span{color: #fff;min-width: 31rpx;display: block;float: left;margin: 2rpx 6rpx;border-radius: 8rpx;padding: 5rpx;height: auto;text-align: center;font-size: 30rpx;background-image: -webkit-gradient(linear,left top,right top,from(#878686),to(#343434));background-image: -webkit-linear-gradient(left,#878686,#343434);background-image: -moz-linear-gradient(left,#878686,#343434);background-image: linear-gradient(to right,#878686,#343434);background-color: #343434; } .time em{float: left;font-size: 30rpx;margin-top: 8rpx; } .list{zoom:1;overflow:auto;width: 92%;padding: 30rpx;border-bottom: 1rpx solid #e2e2e2 ; } .end{float: left;font-size: 31rpx;color: #333333;margin-top:8rpx }

三、timer.js

// pages/Timer/timer.js Page({/*** 頁面的初始數據*/data: {// 結束時間數組endtime: ['2020-08-19 05:25:00','2020-08-19 18:25:00','2020-08-18 15:25:00','2020-08-15 15:25:00', '2020-08-19 05:25:00','2020-08-19 18:25:00','2020-08-18 15:25:00','2020-08-15 15:25:00'],// 倒計時時間數組goodlist:[]},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {this.gotime() // 頁面加載時，執行倒計時函數},// 倒計時函數gotime(){var nowDate = new Date();//獲取當前時間var now = nowDate.getTime()// 轉換當前時間格式var endtime = this.data.endtime // 獲取結束時間數組var down = []endtime.map((item,index)=>{ // 遍歷結束時間數組var endDate = new Date(item) // 獲取結束時間var end =endDate.getTime()var leftTime = end - now; //時間差var d, h, m, s;if(leftTime >= 0) {d = Math.floor(leftTime / 1000 / 60 / 60 / 24);// 獲取天數h = Math.floor(leftTime / 1000 / 60 / 60 % 24);// 獲取小時m = Math.floor(leftTime / 1000 / 60 % 60); // 獲取分鐘數s = Math.floor(leftTime / 1000 % 60); // 獲取秒if(s < 10) {s = "0" + s;}if(m < 10) {m = "0" + m;}if(h < 10) {h = "0" + h;} down.push({ // 將每個倒計時合并到一個數組day: d,hour: h,min: m,sec: s })}else{// 時間差大于等于零down.push({day: 0,hour: '00',min: '00',sec: '00' })}}) this.setData({goodlist: down,}) // 渲染頁面數據setTimeout(this.gotime,1000) // 每秒執行一次函數},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

心得體會

所得思路與方法是通過分析網上大神們的實例所得出，如有侵權請及時聯系，進行協商。本代碼還存在很多不足，如果可以，希望在評論區一起討論

總結

以上是生活随笔為你收集整理的小程序抢购页面倒计时定时器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。