2018-8-30 seo達人
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
JS頁面代碼段：
const app = getApp() let goodsList = [ { actEndTime: '2018-07-21 21:00:34' }, { actEndTime: '2028-07-17 21:00:37' }, { actEndTime: '2018-09-21 05:00:59' }, { actEndTime: '2018-08-19 07:00:48' }, { actEndTime: '2018-08-28 03:00:11' } ] Page({ data: { countDownList: [], actEndTimeList: [] }, onLoad: function () { let endTimeList = []; // 將活動的結束時間參數提成一個單獨的數組，方便操作 goodsList.forEach(o => { endTimeList.push(o.actEndTime) }) this.setData({ actEndTimeList: endTimeList }); // 執行倒計時函數 this.countDown(); }, //當時間小于兩位數時十位數補零。 timeFormat: function (param) {//小于10的格式化函數 return param < 10 ? '0' + param : param; }, //倒計時函數 countDown: function () { // 獲取當前時間，同時得到活動結束時間數組 let newTime = new Date().getTime();//當前時間 let endTimeList = this.data.actEndTimeList;//結束時間的數組集合 let countDownArr = [];//初始化倒計時數組 // 對結束時間進行處理渲染到頁面 endTimeList.forEach(o => { let endTime = new Date(o).getTime(); let obj = null; // 如果活動未結束，對時間進行處理 if (endTime - newTime > 0) { let time = (endTime - newTime) / 1000; // 獲取天、時、分、秒 let day = parseInt(time / (60 * 60 * 24)); let hou = parseInt(time % (60 * 60 * 24) / 3600); let min = parseInt(time % (60 * 60 * 24) % 3600 / 60); let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60); obj = { day: this.timeFormat(day), hou: this.timeFormat(hou), min: this.timeFormat(min), sec: this.timeFormat(sec) } } else {//活動已結束，全部設置為'00' obj = { day: '00', hou: '00', min: '00', sec: '00' } } countDownArr.push(obj); }) //每隔一秒執行一次倒計時函數， 渲染 this.setData({ countDownList: countDownArr }) setTimeout(this.countDown, 1000); } })
wxml頁面代碼段
<view class='tui-countdown-content' wx:for="{{countDownList}}" wx:key="countDownList"> 距結束 <text class='tui-conutdown-box'>{{item.day}}</text>天 <text class='tui-conutdown-box'>{{item.hou}}</text>時 <text class='tui-conutdown-box'>{{item.min}}</text>分 <text class='tui-conutdown-box tui-countdown-bg'>{{item.sec}}</text>秒 </view>
wxss頁面代碼段
page{ background: #f5f5f5; } .tui-countdown-content{ height: 50px; line-height: 50px; text-align: center; background-color: #fff; margin-top: 15px; padding: 0 15px; font-size: 18px; } .tui-conutdown-box{ display: inline-block; height: 26px; width: 26px; line-height: 26px; text-align: center; background:#ccc; color: #000; margin: 0 5px; } .tui-countdown-bg{ background: red; color: #fff; } .container{ width: 100%; display: flex; justify-content: center; } .backView{ width:690rpx; background: #fff; display: flex; flex-direction: column; margin-bottom: 30rpx; } .createDate { background: #f5f5f5; padding:15rpx 15rpx 10rpx 15rpx; line-height: 50rpx; font-size: 28rpx; color: gainsboro; text-align: center; } .backViewitem1{ display: flex; flex-direction: row; height: 55rpx; align-items: center; padding:8rpx 40rpx; border-bottom: 2rpx solid #f5f5f5; } .ico { width:35rpx; height:35rpx; } .name { color: #c13176; margin-left: 20rpx; font-size: 28rpx; } .details { font-size:24rpx; letter-spacing: 2rpx; } .backViewitem2{ display: flex; flex-direction: row; line-height: 35rpx; min-height: 70rpx; padding: 15rpx 40rpx 10rpx 40rpx; border-bottom: 2rpx solid #f5f5f5; } .details1 { color:#888; font-size:23rpx; letter-spacing: 2rpx; }
藍藍設計( www.ocunn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.ocunn.cn
