Heim  >  Artikel  >  WeChat-Applet  >  Beispiel für ein WeChat Mini-Programm: So implementieren Sie einen Batch-Countdown (mit Code)

Beispiel für ein WeChat Mini-Programm: So implementieren Sie einen Batch-Countdown (mit Code)

不言
不言Original
2018-08-10 16:04:294454Durchsuche

Dieser Artikel zeigt Ihnen ein Beispiel für das WeChat-Applet: So implementieren Sie den Batch-Countdown (mit Code). Ich hoffe, dass es für Freunde hilfreich ist.

//Gilt für den Produktlisten-Countdown/*** end_time int Endzeit * param int Array-Schlüssel*/

1 Der Anzeigeeffekt ist wie folgt:

2.wxml-Code:

<p class="promotion-label-tits">仅{{item.endtime}}</p>

3.js-Code:

//封装的倒计时方法
//批量倒计时
function grouponcountdown(that, end_time, param) {
  var EndTime = new Date(end_time).getTime();
  // console.log(EndTime);
  var NowTime = new Date().getTime();

  var total_micro_second = EndTime - NowTime;

  var groupons = that.data.groupon;
  // console.log(groupons);
  groupons[param].endtime = dateformats(total_micro_second);
  if (total_micro_second <= 0) {
    groupons[param].endtime = "已结束"
  }
  that.setData({
    groupon: groupons
  })
  setTimeout(function () {
    grouponcountdown(that, end_time, param);
  }, 1000)
}

// 时间格式化输出,每1s都会调用一次
function dateformats(micro_second) {
  // 总秒数
  var second = Math.floor(micro_second / 1000);
  // 天数
  var day = Math.floor(second / 3600 / 24);
  // 小时
  var hr = Math.floor(second / 3600 % 24);
  var hrStr = hr.toString();
  if (hrStr.length == 1) hrStr = &#39;0&#39; + hrStr;

  // 分钟
  var min = Math.floor(second / 60 % 60);
  var minStr = min.toString();
  if (minStr.length == 1) minStr = &#39;0&#39; + minStr;

  // 秒
  var sec = Math.floor(second % 60);
  var secStr = sec.toString();
  if (secStr.length == 1) secStr = &#39;0&#39; + secStr;

  if (day <= 1) {
    return "剩 " + hrStr + ":" + minStr + ":" + secStr;
  } else {
    return "剩 " + day + " 天 " + hrStr + ":" + minStr + ":" + secStr;
  }
}
//end

var app=getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
      collageTeamlist : {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      app.showLoading();
      var that = this
     
      wx.request({
          success:function(res){
              var grouponList = request.data.collageTeamlist
              // console.log(grouponList);
              for (var i = 0; i < grouponList.length; i++) {
                 var lack_num = grouponList[i].create_num - grouponList[i].current_num
                 grouponList[i].lack_num = lack_num
              }

              that.setData({
                  groupon: grouponList
              })
              var data = that.data.groupon
              //列表获取到数据进行遍历
              for (var i = 0; i < data.length; i++) {
                  var end_time = data[i].end_time.replace(/-/g, &#39;/&#39;)
                  grouponcountdown(that,end_time, i)
              }
          },
      })
  },

Verwandte Empfehlungen:

Beispiel für WeChat-Applet: Code zur Implementierung von Pull- Daten aktualisieren

Miniprogramm: Code zum Implementieren des Klick-Countdowns

Miniprogrammkomponente: Einführung in die Chatsitzungskomponente (mit Code)

Das obige ist der detaillierte Inhalt vonBeispiel für ein WeChat Mini-Programm: So implementieren Sie einen Batch-Countdown (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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