A tutorial on implementing the Countdown function of micro-credit program in Android

Look at the effect

Because of the weak web experience--at first my idea was to look for events, but for half a day the API was basically click Touch, triggered by physical

I actually ignore the life cycle, life cycle + thread is not completely OK ~

It turns out that thread is the kingly way.

Degree Niang above also looked a lot of is to use JS to write, but, probably just did not have a few days, I to JS and micro-Letter Small program Master is not skilled

Ideas:

1. Onload:function (Options) Call Countdown method function
2. Defining threads for data dynamic reality

1. Date converted into milliseconds

2. Define the thread dynamic display

3. Render Countdown

1. Milliseconds to convert to fixed format

2. To deal with the short and minute digits of the supplement 0

Look at the code.

Wxml:

<viewclass= "Pay_time" > <image src= ' {imgurls_pay_time}} ' ></image> <text> Payment remaining time:</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) { Page initialization options The parameters that are brought by the page jump Newapp. Wetoast () var that =this; That.count_down (); }, Onready:function () { Page Render Complete }, Onshow:function () { Page display }, Onhide:function () { Page Hide }, Onunload:function () { Page off }, * * Millisecond Countdown * Count_down:function () { var that = this 2016-12-27 12:47:08 Convert date format var a = That.data.expireTime.split (/[^0-9]/); Due Date: date to milliseconds var expirems = new Date (a[0], a[1]-1, a[2], a[3], a[4], a[5]); Countdown milliseconds var duringms = Expirems.gettime ()-(New Date ()). GetTime (); Render Countdown Clock That.setdata ({ Clock:that.date_format (DURINGMS) }); if (duringms <= 0) { That.setdata ({ Clock: "Payment has been closed, please order again" }); Timeout is jumping out of recursion. Return } settimeout (function () { Put in the last-- Duringms-= 10; That.count_down (); } , 10) }, /* Format Countdown * * Date_format:function (Micro_second) { var that = this Number of seconds var second = Math.floor (micro_second/1000); Hour bit var hr = Math.floor (second/3600); Minute bit var min = That.fill_zero_prefix (Math.floor (SECOND-HR * 3600)/60)); Second bit var sec = Fill_zero_prefix (second%);//equal to => var sec = second% 60; return hr + ":" + min + ":" + sec + ""; }, * * The number of seconds to fill 0 * * Fill_zero_prefix:function (num) { Returnnum <10? " 0 "+ num:num } })

Tip

If you do not make a bit of 0

will display the following