Implementierungscode für die WeChat-Applet-Countdown-Komponente

In diesem Artikel werden hauptsächlich relevante Informationen zum Implementierungscode der Countdown-Komponente des WeChat-Applets vorgestellt. Freunde in Not können sich auf die

Funktion beziehen: Geeignet für zeitlich begrenzte Gruppenkäufe, Produkt-Flash-Verkäufe, usw. in E-Commerce-Anwendungen

Werfen wir zunächst einen Blick auf den endgültigen Effekt:

Git-Quelle: http://git. oschina.net/dotton/CountDown

Punkte Schritte - Für ungeduldige Freunde können Sie sich direkt den letzten Codeabschnitt ansehen.

Text in die WXML-Datei einfügen

Sekunde: {{Sekunde}} Mikrosekunde:{{Mikrosekunde}}

Rufen Sie

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);
  }
});

in der js-Datei auf, um die Überprüfung auszuführen, gehen Sie von 10 auf 1 s und zeigen Sie dann die Zeit an.

Daher verbessern wir die Millisekunden weiter. Beachten Sie, dass die Schrittgröße von Millisekunden durch die Zeitfrequenz des Systems begrenzt ist, sodass wir auf 0,01 s genau sind, was 10 ms entspricht

js

/* 秒级倒计时 */
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)
}

/* 毫秒级倒计时 */
// 初始毫秒数，同时用作归零
var micro_second_init = 100;
// 当前毫秒数
var micro_second_current = micro_second_init;
// 毫秒计时器
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-Datei

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

<text>{{micro_second}}</text>

Auf diese Weise, wenn die zweite -Level-Vorgang ist abgeschlossen, der Millisekunden-Level-Timer ist clearTimeout und zeigt den Text als „micro_second too“ an

und fügt eine countdown4micro-Methode hinzu, um den Countdown der verbleibenden 0:3:19 89 anzuzeigen

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;
}
目前有2个时钟，影响性能，合并下去掉countdown，于是countdown4micro变成以下的样子：

function countdown4micro(that) {

  var loop_second = Math.floor(loop_index / 100);
  // 得知经历了1s
  if (cost_micro_second != loop_second) {
    // 赋予新值
    cost_micro_second = loop_second;
    // 总秒数减1
    total_second--;

  }
   // 每隔一秒，显示值减1; 渲染倒计时时钟
  that.setData({
   clock:dateformat(total_second - 1)
  });

   if (total_second == 0) {
    that.setData({
     // micro_second: "",
     clock:"时间到"
    });
    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--;
  // 放在最后++，不然时钟停止时还有10毫秒剩余
  loop_index ++;
  countdown4micro(that);
 }
 ,10)
}

Auf diese Weise werden Millisekunden und Stunden, Minuten und Sekunden zum Rendern getrennt ausgeführt. Das Programm wird dadurch wiederum besser lesbar. dateformat arbeitet mit Millisekunden und akzeptiert keine Sekunden. Gleichzeitig wird die Berechnung von 100 Berechnungen für 1 Sekunde gespeichert

/** 
 * 需要一个目标日期，初始化时，先得出到当前时间还有剩余多少秒
 * 1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX
 * 2.提供一个时钟，每10ms运行一次，渲染时钟，再总ms数自减10
 * 3.剩余的秒次为零时，return，给出tips提示说，已经截止
 */

// 定义一个总毫秒数，以一分钟为例。TODO，传入一个时间点，转换成总毫秒数
var total_micro_second = 2 * 1000;

/* 毫秒级倒计时 */
function countdown(that) {
   // 渲染倒计时时钟
   that.setData({
     clock:dateformat(total_micro_second)
   });

   if (total_micro_second <= 0) {
     that.setData({
       clock:"已经截止"
     });
     // timeout则跳出递归
     return ;
   }  
   setTimeout(function(){
    // 放在最后--
    total_micro_second -= 10;
    countdown(that);
  }
  ,10)
}

// 时间格式化输出，如3:25:19 86。每10ms都会调用一次
function dateformat(micro_second) {
   // 秒数
   var second = Math.floor(micro_second / 1000);
   // 小时位
   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;
  // 毫秒位，保留2位
  var micro_sec = Math.floor((micro_second % 1000) / 10);
  return hr + ":" + min + ":" + sec + " " + micro_sec;
}

Page({
  data: {
    clock: ''
  },
  onLoad: function() {
    countdown(this);
  }
});

Nach der obigen Optimierung wird die Codemenge um die Hälfte reduziert. und die Betriebseffizienz ist ebenfalls hoch.

Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!

Weitere Artikel zum Implementierungscode der WeChat-Applet-Countdown-Komponente finden Sie auf der chinesischen PHP-Website!