android订单支付倒计时,Android中微信小程序支付倒计时功能

看效果

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

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

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

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

思路：

onLoad:function(options)调用倒计时方法函数

定义线程进行数据动态现实

1. 日期转化成毫秒

2.定义线程动态显示

3.渲染倒计时

1.毫秒转成固定格式

2. 处理分秒位数不足的补0

看代码了

wxml:

支付剩余时间：

{{clock}}

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

将会显示如下

以上所述是小编给大家介绍的Android中微信小程序支付倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！