当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序显示倒计时功能示例【测试可用】

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

2018年12月05日  | 移动技术网IT编程  | 我要评论

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

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

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

运行结果如下图所示：

 

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网