微信小程序中顯示活動倒計時的方法及代碼
來源:綿陽動力網絡公司  時間:2019-05-13  閱讀:10

大家好,今天是星期一,雨后天晴、陽光明媚,愿大家都有一個愉快的心情!開場白講完了,接下來就進入我們的正題:微信小程序中顯示活動倒計時。倒計時可以用在很多場景中,比如活動開始倒計時、重大節日倒計時等等。平時在網站建設中用得比較多,那在微信小程序里又該如何來實現呢?今天綿陽動力網絡公司就來帶大家一起學習:

首先是wxml文件:

<!--倒計時 -->
  <view class="countDownTimeView countDownAllView" >
   <view class="voteText countDownTimeText">{{countDownDay}}天</view>
   <view class="voteText countDownTimeText">{{countDownHour}}時</view>
   <view class="voteText countDownTimeText">{{countDownMinute}}分</view>
   <view class="voteText countDownTimeText">{{countDownSecond}}秒</view>
  </view>

然后是js文件:

Page( {
 data: {
  windowHeight: 654,
  maxtime: "",
  isHiddenLoading: true,
  isHiddenToast: true,
  dataList: {},
  countDownDay: 0,
  countDownHour: 0,
  countDownMinute: 0,
  countDownSecond: 0,
 },
 //事件處理函數
 bindViewTap: function() {
  wx.navigateTo( {
   url: '../logs/logs'
  })
 },
 onLoad: function() {
  this.setData( {
   windowHeight: wx.getStorageSync( 'windowHeight' )
  });
 },
 
 // 頁面渲染完成后 調用
 onReady: function () {
  var totalSecond = 1505540080 - Date.parse(new Date())/1000;
 
  var interval = setInterval(function () {
   // 秒數
   var second = totalSecond;
 
   // 天數位
   var day = Math.floor(second / 3600 / 24);
   var dayStr = day.toString();
   if (dayStr.length == 1) dayStr = '0' + dayStr;
 
   // 小時位
   var hr = Math.floor((second - day * 3600 * 24) / 3600);
   var hrStr = hr.toString();
   if (hrStr.length == 1) hrStr = '0' + hrStr;
 
   // 分鐘位
   var min = Math.floor((second - day * 3600 *24 - hr * 3600) / 60);
   var minStr = min.toString();
   if (minStr.length == 1) minStr = '0' + minStr;
 
   // 秒位
   var sec = second - day * 3600 * 24 - hr * 3600 - min*60;
   var secStr = sec.toString();
   if (secStr.length == 1) secStr = '0' + secStr;
 
   this.setData({
    countDownDay: dayStr,
    countDownHour: hrStr,
    countDownMinute: minStr,
    countDownSecond: secStr,
   });
   totalSecond--;
   if (totalSecond < 0) {
    clearInterval(interval);
    wx.showToast({
     title: '活動已結束',
    });
    this.setData({
     countDownDay: '00',
     countDownHour: '00',
     countDownMinute: '00',
     countDownSecond: '00',
    });
   }
  }.bind(this), 1000);
 },
 
 //cell事件處理函數
 bindCellViewTap: function (e) {
  var id = e.currentTarget.dataset.id;
  wx.navigateTo({
   url: '../babyDetail/babyDetail?id=' + id
  });
 }
})

最后是最終實現出來的效果圖:

微信小程序中顯示活動倒計時的方法及代碼

 好了,通過上線代碼就可以順利的實現活動倒計時功能了,趕緊收藏吧!

 
  • 電話咨詢

  • 0816-2318288
辽宁11选5走势图