微信小程序-支付倒计时

微信小程序 支付倒计时

看效果

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

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

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

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

思路：

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

看代码了

wxml:

 

[html] view plain copy
 
  1. <view class="pay_time">  
  2.   <image src="{{imgUrls_pay_time}}"></image>  
  3.   <text>支付剩余时间：</text>  
  4.   <text>{{clock}} </text>  
  5. </view>  

 

wxjs:

 

[javascript] view plain copy
 
    1. // pages/order/take_order/pay/pay.js  
    2. var app = getApp()  
    3. Page({  
    4.   data: {  
    5.     imgUrls_pay_time: '/image/icon_orderstatus_countdown.png',  
    6.     "productName": "",  
    7.     "productPrice": "",  
    8.     "payDetail": [],  
    9.     "wxPayMoneyDesc": "",  
    10.     "expireTime": "",  
    11.     clock: ''  
    12.   },  
    13.   onLoad: function (options) {  
    14.     // 页面初始化 options为页面跳转所带来的参数  
    15.     new app.WeToast()  
    16.     var that = this;  
    17.     that.count_down();  
    18.       
    19.   },  
    20.   
    21.   onReady: function () {  
    22.     // 页面渲染完成  
    23.   },  
    24.   onShow: function () {  
    25.     // 页面显示  
    26.   },  
    27.   onHide: function () {  
    28.     // 页面隐藏  
    29.   },  
    30.   onUnload: function () {  
    31.     // 页面关闭  
    32.   },  
    33.   /* 毫秒级倒计时 */  
    34.   count_down: function () {  
    35.     var that = this  
    36.     //2016-12-27 12:47:08 转换日期格式  
    37.     var a = that.data.expireTime.split(/[^0-9]/);  
    38.     //截止日期：日期转毫秒  
    39.     var expireMs = new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);  
    40.     //倒计时毫秒  
    41.     var duringMs = expireMs.getTime() - (new Date()).getTime();  
    42.     // 渲染倒计时时钟  
    43.     that.setData({  
    44.       clock: that.date_format(duringMs)  
    45.     });  
    46.   
    47.     if (duringMs <= 0) {  
    48.       that.setData({  
    49.         clock: "支付已截止，请重新下单"  
    50.       });  
    51.       // timeout则跳出递归  
    52.       return;  
    53.     }  
    54.     setTimeout(function () {  
    55.       // 放在最后--  
    56.       duringMs -= 10;  
    57.       that.count_down();  
    58.     }  
    59.       , 10)  
    60.   },  
    61.    /* 格式化倒计时 */  
    62.   date_format: function (micro_second) {  
    63.     var that = this  
    64.     // 秒数  
    65.     var second = Math.floor(micro_second / 1000);  
    66.     // 小时位  
    67.     var hr = Math.floor(second / 3600);  
    68.     // 分钟位  
    69.     var min = that.fill_zero_prefix(Math.floor((second - hr * 3600) / 60));  
    70.     // 秒位  
    71.     var sec = fill_zero_prefix(second % 60);// equal to => var sec = second % 60;  
    72.     return hr + ":" + min + ":" + sec + " ";  
    73.   },  
    74.   
    75.   /* 分秒位数补0 */  
    76.   fill_zero_prefix: function (num) {  
    77.     return num < 10 ? "0" + num : num  
    78.   }  
    79.   
    80.   
    81. })  
posted @ 2017-11-21 14:54  五艺  阅读(365)  评论(0)    收藏  举报