Heim > WeChat-Applet > Mini-Programmentwicklung > WeChat-Applet-Zahlungscountdown-Funktion in Android

WeChat-Applet-Zahlungscountdown-Funktion in Android

高洛峰
Freigeben: 2017-01-10 09:54:47
Original
1955 Leute haben es durchsucht

Sehen Sie sich den Effekt an

WeChat-Applet-Zahlungscountdown-Funktion in Android

Aufgrund meiner schwachen Web-Erfahrung - - Zuerst war meine Idee, Ereignisse zu finden, aber nachdem ich mich lange mit der API beschäftigt hatte , es war im Grunde ein Klicken und Berühren, ausgelöst durch die Physik. - -

Ich habe den Lebenszyklus + Threads völlig in Ordnung ~

Es stellt sich heraus, dass Threads immer noch König sind. Dies sollte von Anfang an erfolgen ~

Du Niang hat auch gelesen, dass viele davon in js geschrieben sind, aber vielleicht habe ich es erst vor ein paar Tagen gemacht und bin nicht kompetent genug in js und WeChat-Miniprogramme

Dinge:

onLoad:function(options) ruft die Countdown-Methodenfunktion auf

Thread für dynamische Datenrealisierung definieren

1. Konvertieren Sie das Datum in Millisekunden

2. Definieren Sie die dynamische Anzeige des Threads

3. Rendern des Zählzeitpunkts

1. In ein festes Format umwandeln

2. Behandlung halbe Sekunde Wenn nicht genügend Ziffern vorhanden sind, fügen Sie 0 hinzu

Sehen Sie sich den Code an

wxml:

<view class="pay_time">
 <image src="{{imgUrls_pay_time}}"></image>
 <text>支付剩余时间:</text>
 <text>{{clock}} </text>
</view>
Nach dem Login kopieren

wxjs:

// pages/order/take_order/pay/pay.js
var app = getApp()
Page({
 data: {
  imgUrls_pay_time: &#39;/image/icon_orderstatus_countdown.png&#39;,
  "productName": "",
  "productPrice": "",
  "payDetail": [],
  "wxPayMoneyDesc": "",
  "expireTime": "",
  clock: &#39;&#39;
 },
 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
 }
})
Nach dem Login kopieren

Tipp:

Wenn die Ziffern werden nicht mit 0 aufgefüllt

es wird wie folgt angezeigt

WeChat-Applet-Zahlungscountdown-Funktion in Android

Das Obige ist die vom Herausgeber eingeführte Zahlungscountdown-Funktion des WeChat-Applets in Android . Ich hoffe, es hilft Ihnen, wenn Sie Fragen haben, und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere Artikel zur Zahlungscountdown-Funktion des WeChat-Applets in Android finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage