微信小程序显示倒计时功能示例【测试可用】

本文实例讲述了微信小程序显示倒计时功能。分享给大家供大家参考，具体如下：微信小程

本文实例讲述了微信小程序显示倒计时功能。分享给大家供大家参考，具体如下：

微信小程序中显示倒计时：

index.wxml:

<view class='countdown'>剩:<text style='color:#6B4EFD'> {{countDownDay}} </text> 天 <text style='color:#6B4EFD'>{{countDownHour}} </text> <text style='color:#6B4EFD'>{{countDownMinute}} </text> <text style='color:#6B4EFD'>{{countDownSecond}} </text>
</view>

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
 });
 }
})

运行结果如下图所示：

希望本文所述对大家微信小程序开发有所帮助。