WeChat mini-program countdown component implementation code, mini-program countdown

Code of the applet countdown component and the applet countdown

Function: Applicable to limited-time group buying and product flash sales for e-commerce applications

Let's take a look at the final effect:

Git Source: http://git.oschina.net/dotton/CountDown

Step-by-Step: You can directly view the final code.

Add text to the wxml File

<Text> second :{{ second }}micro second :{{ micro_second }}</text>

Call in js File

function countdown(that) { var second = that.data.second if (second == 0) {  // console.log("Time Out...");  that.setData({   second: "Time Out..."  });  return ; } var time = setTimeout(function(){  that.setData({   second: second - 1  });  countdown(that); } ,1000)}Page({  data: {    second: 3  },  onLoad: function() {    countdown(this);  }});

Run the verification, from 10 to 1 s, and then display the time.

So we continue to improve in milliseconds. Note that the millisecond step is limited by the system's time frequency, so we are accurate to 0.01s, that is, 10 ms.

Js

/* Second-level countdown */function countdown (that) {var second = that. data. second if (second = 0) {that. setData ({second: "Time out! ", Micro_second:" micro_second too. "}); clearTimeout (micro_timer); return;} var timer = setTimeout (function () {that. setData ({second: second-1}); countdown (that) ;}, 1000)}/* millisecond-level countdown * // initial millisecond count, var micro_second_init = 100; // current millisecond count var micro_second_current = micro_second_init; // millisecond timer var micro_timer; function countdown4micro (that) {if (micro_second_current <= 0) {micro_second_current = micro_second_init;} micro_timer = setTimeout (function () {that. setData ({micro_second: micro_second_current-1}); micro_second_current --; countdown4micro (that) ;}, 10)} Page ({data: {second: 2, micro_second: micro_second_init }, onLoad: function () {countdown (this); countdown4micro (this );}});

Wxml File

<text style="display: block;">second: {{second}}s</text><text>{{micro_second}}</text>

In this way, when the second-level operation is completed, the millisecond-level timer is clearTimeout, and the text is displayed as 'micro _ second too'

Add the countdown4micro method to display the reciprocal of the remaining 0: 19 89 format.

Function dateformat (second) {var dateStr = ""; var hr = Math. floor (second/3600); var min = Math. floor (second-hr * 3600)/60); var sec = (second-hr * 3600-min * 60 ); // equal to => var sec = second % 60; dateStr = hr + ":" + min + ":" + sec; return dateStr;} currently has 2 clocks, the countdown is removed under the merge statement, so countdown4micro becomes the following: function countdown4micro (that) {var loop_second = Math. floor (loop_indexes/100 ); // Learned that it has gone through 1 s if (cost_micro_second! = Loop_second) {// assign the new cost_micro_second = loop_second; // The total number of seconds minus 1 total_second --;} // The display value minus 1 every second; the rendering countdown clock that. setData ({clock: dateformat (total_second-1)}); if (total_second = 0) {that. setData ({// micro_second: "", clock: "Time to"}); clearTimeout (micro_timer); return;} if (micro_second_current <= 0) {micro_second_current = micro_second_init ;} micro_timer = setTimeout (function () {that. setData ({micro_second: micro_second_current-1}); micro_second_current --; // put it at the end of ++; otherwise, there will be 10 milliseconds of loop_index ++; countdown4micro (that );}, 10 )}

In this way, rendering is run separately in milliseconds and minutes, and the program is retransformed to be more readable. Dateformat is applicable to operations in milliseconds without the number of seconds. At the same time, it saves the time for computing 100 million operations to 1 s.

/*** A target date is required. during initialization, the number of seconds remaining until the current time is exceeded * 1. convert the number of seconds into formatted output format: XX days, XX hours, XX minutes, XX seconds, XX * 2. provides a clock that runs every 10 ms, rendering the clock, and then auto-minus 10*3 in the total number of ms. if the remaining seconds are zero and return, a tips prompt is displayed, indicating that a total number of milliseconds has been defined as of * //. Take one minute as an example. TODO: input a time point and convert it to the total number of milliseconds var total_micro_second = 2*1000;/* millisecond-level countdown */function countdown (that) {// render countdown clock that. setData ({clock: dateformat (total_micro_second)}); if (total_micro_second <= 0) {that. setData ({clock: "ended"}); // timeout will jump out of recursive return;} setTimeout (function () {// put it at the end -- total_micro_second-= 10; countdown (that) ;}, 10)} // time formatted output, for example, 3:25:19. Function dateformat (micro_second) is called every 10 ms {// number of seconds var second = Math. floor (micro_second/1000); // hourly var hr = Math. floor (second/3600); // minute bit var min = Math. floor (second-hr * 3600)/60); // second bit var sec = (second-hr * 3600-min * 60 ); // equal to => var sec = second % 60; // two-bit var micro_sec = Math is retained in milliseconds. floor (micro_second % 1000)/10); return hr + ":" + min + ":" + sec + "" + micro_sec;} Page ({data: {clock: ''}, onLoad: function () {countdown (this );}});

After the above optimization, the Code volume is reduced by half, and the running efficiency is also high.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!