微信小程序中显示倒计时
生活随笔
收集整理的這篇文章主要介紹了
微信小程序中显示倒计时
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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});} })效果圖:
總結
以上是生活随笔為你收集整理的微信小程序中显示倒计时的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: SQLZOO练习-- SELECT wi
- 下一篇: iOS:2015年07月最新苹果IOS上