微信小程序中顯示倒計時代碼實例

更新時間：2019年05月09日 16:04:29 作者：MacleChen

這篇文章主要介紹了微信小程序中顯示倒計時，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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,
 },
 //事件處理函數(shù)
 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 () {
   // 秒數(shù)
   var second = totalSecond;
 
   // 天數(shù)位
   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事件處理函數(shù)
 bindCellViewTap: function (e) {
  var id = e.currentTarget.dataset.id;
  wx.navigateTo({
   url: '../babyDetail/babyDetail?id=' + id
  });
 }
})

效果圖：

以上所述是小編給大家介紹的微信小程序中顯示倒計時詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

Nuxt v-bind綁定img src不顯示的解決
這篇文章主要介紹了Nuxt v-bind綁定img src不顯示的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-12-12
微信小程序自定義select下拉選項框組件的實現(xiàn)代碼
微信小程序中沒有select下拉選項框，所以只有自定義。這篇文章主要介紹了微信小程序自定義select下拉選項框組件,需要的朋友可以參考下
2018-08-08
js模擬類繼承小例子
使用js模擬類繼承小例子，學習js面向對象的朋友可以參考下。
2010-07-07
JavaScript事件機制的剖析與優(yōu)化詳解
在現(xiàn)代前端開發(fā)中,JavaScript事件處理是一個至關重要的部分,它能夠使網頁與用戶交互,實現(xiàn)豐富的交互體驗,然而,對JavaScript事件機制的深入理解是開發(fā)者成為優(yōu)秀前端工程師的關鍵所在,本文將全面剖析JavaScript事件機制,需要的朋友可以參考下
2023-12-12
JavaScript實現(xiàn)MIPS乘法模擬的方法
這篇文章主要介紹了JavaScript實現(xiàn)MIPS乘法模擬的方法,實例分析了JavaScript實現(xiàn)MIPS乘法模擬的運算技巧,需要的朋友可以參考下
2015-04-04
Bootstrap一款超好用的前端框架
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，用于開發(fā)響應式布局、移動設備優(yōu)先的 WEB 項目。接下來通過本文給大家分享Bootstrap一款超好用的前端框架，感興趣的朋友一起看看吧
2017-09-09
微信小程序前端源碼邏輯和工作流
這篇文章主要介紹了微信小程序前端源碼邏輯和工作流的相關資料,本文還給大家提供了文本基本結構圖和實例代碼，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09
原生JS實現(xiàn)移動端web輪播圖詳解（結合Tween算法造輪子）
在做移動端開發(fā)的時候，必不可少的是輪播圖，下面這篇文章主要給大家介紹了關于利用純JS實現(xiàn)移動端web輪播圖的相關資料，重要的是結合Tween算法造輪子，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09
asp.net+js 實現(xiàn)無刷新上傳解析csv文件的代碼
無刷新上傳解析csv文件的實現(xiàn)代碼，需要的朋友可以參考下。
2010-05-05
js+CSS實現(xiàn)模擬華麗的select控件下拉菜單效果
這篇文章主要介紹了js+CSS模擬select控件下拉菜單效果,通過javascript鼠標事件結合css控制實現(xiàn)select下拉菜單效果,整體效果華麗美觀,需要的朋友可以參考下
2015-09-09