小程序倒计时wxml与js

所属栏目:建站技术 发布时间:2020-10-30 点击: 文章来源:https://www.sznest.net/html/list2show.php?id=3515

小程序倒计时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())/1000+10 - 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);
  },
})


小程序倒计时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>


相关阅读

如何更换本机DNS

计算机上网需要dns解析域名方可将域名和空间服务器上内容对应起来,所以能上网的计算机都要配置一个dn…

了解详情 >>

用火狐打开百度一直加载s1.b…

一直用火狐浏览器,火狐浏览器插件多,很合适网页开发人员使用,以前一直用的好好的,但是今天使用的时候突…

了解详情 >>

正则表达式收集汇总

搜索:empty(($)tr['([a-z]{1,})']),可以查找这样的empt…

了解详情 >>

asp用正则批量替换过滤表中所…

SetHF=NewRegExp'建立正则表达式。HF.Pattern="《img[…

了解详情 >>

过滤html标签与标签之间的空…

<?phpob_start();?><pid="name"&g…

了解详情 >>

小程序的下单与支付的业务流程

1:小程序携带商品信息调用第三方服务器的下单API2:第三方服务器下单API对小程序带来的商品作库存…

了解详情 >>

Copyright @ 2008-2019   www.sznest.net   All rights reserved  专注于免费建站,自助建站,模板建站,选免费模板免费送香港空间,选收费模板先建站后付款   粤ICP备11083046号       

微信

移动端

客服

顶部