微信小程序中显示倒计时代码实例
程序员文章站
2022-06-30 10:29:21
wxml文件中:
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 }); } })
效果图:
以上所述是小编给大家介绍的微信小程序中显示倒计时详解整合,希望对大家有所帮助