微信小程序-支付倒计时

微信小程序支付倒计时

看效果

由于web 经验弱爆- - 一开始我的思路是找事件，但是看了半天API 基本都是点击触摸，通过物理触发- -

我居然忽略了生命周期，生命周期+线程不就完全OK吗～

事实证明，线程还是王道啊，一开始就应该这么搞嘛～

度娘上面也看了很多都是用js写的，but，可能刚做没几天吧，我对js与微信小程序掌握还不够熟练

思路：

onLoad:function(options)调用倒计时方法函数
定义线程进行数据动态现实
1. 日期转化成毫秒
2. 定义线程动态显示
3. 渲染倒计时
  1. 毫秒转成固定格式
  2. 处理分秒位数不足的补0

看代码了

wxml:

扫描二维码关注公众号，回复： 3838546 查看本文章

<view class="pay_time">
  <image src="{{imgUrls_pay_time}}"></image>
  <text>支付剩余时间：</text>
  <text>{{clock}} </text>
</view>

wxjs:

// pages/order/take_order/pay/pay.js
var app = getApp()
Page({
  data: {
    imgUrls_pay_time: '/image/icon_orderstatus_countdown.png',
    "productName": "",
    "productPrice": "",
    "payDetail": [],
    "wxPayMoneyDesc": "",
    "expireTime": "",
    clock: ''
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    new app.WeToast()
    var that = this;
    that.count_down();
    
  },

  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  /* 毫秒级倒计时 */
  count_down: function () {
    var that = this
    //2016-12-27 12:47:08 转换日期格式
    var a = that.data.expireTime.split(/[^0-9]/);
    //截止日期：日期转毫秒
    var expireMs = new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
    //倒计时毫秒
    var duringMs = expireMs.getTime() - (new Date()).getTime();
    // 渲染倒计时时钟
    that.setData({
      clock: that.date_format(duringMs)
    });

    if (duringMs <= 0) {
      that.setData({
        clock: "支付已截止，请重新下单"
      });
      // timeout则跳出递归
      return;
    }
    setTimeout(function () {
      // 放在最后--
      duringMs -= 10;
      that.count_down();
    }
      , 10)
  },
   /* 格式化倒计时 */
  date_format: function (micro_second) {
    var that = this
    // 秒数
    var second = Math.floor(micro_second / 1000);
    // 小时位
    var hr = Math.floor(second / 3600);
    // 分钟位
    var min = that.fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
    // 秒位
    var sec = fill_zero_prefix(second % 60);// equal to => var sec = second % 60;
    return hr + ":" + min + ":" + sec + " ";
  },

  /* 分秒位数补0 */
  fill_zero_prefix: function (num) {
    return num < 10 ? "0" + num : num
  }


})

tip:

如果不进行位数补0

将会显示如下

微信小程序-支付倒计时

猜你喜欢