1. 程式人生 > >微信小程式之商城倒計時

微信小程式之商城倒計時

index.html  === >

<view class="countDownTimeView pull-left countDownAllView text-left">

     <text>倒計時:</text>

     <text class="voteText countDownTimeText">{{countDownHour}}</text> :

     <text class="voteText countDownTimeText">{{countDownMinute}}</text> :

     <text class="voteText countDownTimeText">{{countDownSecond}}</text>

</view>

util.js  === >

const formatTime = date => {

     const year = date.getFullYear()
     const month = date.getMonth() + 1
     const day = date.getDate()
     const hour = date.getHours()
     const minute = date.getMinutes()
     const second = date.getSeconds()

     return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')

}


const formatNumber = n => {
     n = n.toString()
     return n[1] ? n : '0' + n
}


module.exports = {
     formatTime: formatTime
}

index.js  === >

var util = require('../../utils/util.js');       //呼叫微信小程式中時間格式化的js

Page: ({

        data: {

                 countDownHour: 0, //倒計時 -時
                 countDownMinute: 0,  //倒計時 -分
                 countDownSecond: 0,  //倒計時-秒

         },



        // 頁面渲染後 執行

       onLoad: function () {

                //設定倒計時時間,1s變換一次
               var interval = setInterval(function () {
                     var d = new Date();   //獲取系統日期和時間
                     var nowHour = d.getHours(); //小時
                     var nowMinutes = d.getMinutes(); //分
                     var nowSeconds = d.getSeconds(); //秒

                     // 顯示在倒計時中的小時位
                     var hour = 24 - nowHour;

                     // 顯示在倒計時中的分鐘位
                     var minutes = 60 - nowMinutes;

                     // 顯示在倒計時中的秒數
                     var seconds = 60 - nowSeconds;


                     //當小時、分鐘、秒都為0時,活動結束,倒計時顯示為00:00:00
                     if (hour == 0 && minutes == 0 && seconds == 0) {

                           clearInterval(interval);
                           wx.showToast({
                                title: '活動已結束',
                           });
                           console.log(totalSecond);

                           this.setData({
                                countDownHour: '00',
                                countDownMinute: '00',
                                countDownSecond: '00',
                           });
                      }


                      //當小時位、分鐘位、秒位小於10時,用字串拼接的方式顯示,例如:06:08:02

                     if (hour < 10) {
                          hour = "0" + hour;
                     }

                     if (minutes < 10) {
                          minutes = "0" + minutes;
                     }

                     if (seconds < 10) {
                          seconds = "0" + seconds;
                     }

                     this.setData({
                          countDownHour: hour,
                          countDownMinute: minutes,
                          countDownSecond: seconds,
                     });

               }.bind(this), 1000);

      },

})

最終實現效果圖如下: