微信小程序显示倒计时功能示例【测试可用】
程序员文章站
2023-01-07 22:34:31
本文实例讲述了微信小程序显示倒计时功能。分享给大家供大家参考,具体如下:
微信小程序中显示倒计时:
index.wxml:
index.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 = date.parse(new date("2018/12/12")) / 1000 - 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 }); } })
运行结果如下图所示:
希望本文所述对大家微信小程序开发有所帮助。