欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 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
  });
 }
})

运行结果如下图所示:

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

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

上一篇: 古代女子足不出户身材还那么纤瘦,原因是什么?

下一篇: 东晋平定谯蜀之战的战争过程,谯蜀是怎么灭亡的

推荐阅读