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

微信小程序中显示倒计时代码实例

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

效果图:

微信小程序中显示倒计时代码实例

以上所述是小编给大家介绍的微信小程序中显示倒计时详解整合,希望对大家有所帮助