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 = [];
                

            

        

        


            


                


                

            

            


                

                    // 將活動(dòng)的結(jié)束時(shí)間參數(shù)提成一個(gè)單獨(dú)的數(shù)組，方便操作
                

            

        

        


            


                


                

            

            


                

                    goodsList.forEach(o => { endTimeList.push(o.actEndTime) })
                

            

        

        


            


                


                

            

            


                

                    this.setData({ actEndTimeList: endTimeList });
                

            

        

        


            


                


                

            

            


                

                    // 執(zhí)行倒計(jì)時(shí)函數(shù)
                

            

        

        


            


                


                

            

            


                

                    this.countDown();
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    //當(dāng)時(shí)間小于兩位數(shù)時(shí)十位數(shù)補(bǔ)零。
                

            

        

        


            


                


                

            

            


                

                    timeFormat: function (param) {//小于10的格式化函數(shù)
                

            

        

        


            


                


                

            

            


                

                    return param < 10 ? '0' + param : param;
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    //倒計(jì)時(shí)函數(shù)
                

            

        

        


            


                


                

            

            


                

                    countDown: function () {
                

            

        

        


            


                


                

            

            


                

                    // 獲取當(dāng)前時(shí)間，同時(shí)得到活動(dòng)結(jié)束時(shí)間數(shù)組
                

            

        

        


            


                


                

            

            


                

                    let newTime = new Date().getTime();//當(dāng)前時(shí)間
                

            

        

        


            


                


                

            

            


                

                    let endTimeList = this.data.actEndTimeList;//結(jié)束時(shí)間的數(shù)組集合
                

            

        

        


            


                


                

            

            


                

                    let countDownArr = [];//初始化倒計(jì)時(shí)數(shù)組
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    // 對(duì)結(jié)束時(shí)間進(jìn)行處理渲染到頁面
                

            

        

        


            


                


                

            

            


                

                    endTimeList.forEach(o => {
                

            

        

        


            


                


                

            

            


                

                    let endTime = new Date(o).getTime();
                

            

        

        


            


                


                

            

            


                

                    let obj = null;
                

            

        

        


            


                


                

            

            


                

                    // 如果活動(dòng)未結(jié)束，對(duì)時(shí)間進(jìn)行處理
                

            

        

        


            


                


                

            

            


                

                    if (endTime - newTime > 0) {
                

            

        

        


            


                


                

            

            


                

                    let time = (endTime - newTime) / 1000;
                

            

        

        


            


                


                

            

            


                

                    // 獲取天、時(shí)、分、秒
                

            

        

        


            


                


                

            

            


                

                    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 {//活動(dòng)已結(jié)束，全部設(shè)置為'00'
                

            

        

        


            


                


                

            

            


                

                    obj = {
                

            

        

        


            


                


                

            

            


                

                    day: '00',
                

            

        

        


            


                


                

            

            


                

                    hou: '00',
                

            

        

        


            


                


                

            

            


                

                    min: '00',
                

            

        

        


            


                


                

            

            


                

                    sec: '00'
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    countDownArr.push(obj);
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    //每隔一秒執(zhí)行一次倒計(jì)時(shí)函數(shù)， 渲染
                

            

        

        


            


                


                

            

            


                

                    this.setData({ countDownList: countDownArr })
                

            

        

        


            


                


                

            

            


                

                    setTimeout(this.countDown, 1000);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

    

wxml頁面代碼段

    


        


            


                


                

            

            


                

                    <view class='tui-countdown-content' wx:for="{{countDownList}}" wx:key="countDownList">
                

            

        

        


            


                


                

            

            


                

                    距結(jié)束
                

            

        

        


            


                


                

            

            


                

                    <text class='tui-conutdown-box'>{{item.day}}</text>天
                

            

        

        


            


                


                

            

            


                

                    <text class='tui-conutdown-box'>{{item.hou}}</text>時(shí)
                

            

        

        


            


                


                

            

            


                

                    <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;
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

    

 藍(lán)藍(lán)設(shè)計(jì)( m.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。