WeChatアプレットは単一または複数のカウントダウン機能を実現します。

WeChatアプレットは単一/複数のカウントダウン表示を実現します。

単一カウントダウン

複数のカウントダウン

考え方：まず、カウントダウンの終了時間を取得して、終了時間と現在時間をタイムスタンプに変換して、終了時間を現在の時間を引いて、さらに1000で割る（タイムスタンプはミリ秒ですので）。これは終了時間と現在の時間の秒数です。そして、数式に基づいてタイムスタンプを計算して、最後にタイマーを使って、毎秒走ると成功します。
二つのカウントダウンの考え方は同じです。複数のカウントダウンは配列ステップを巡回して、配列内の各オブジェクトの終了時間を巡回して時間を計算します。
はい考えを言い終わったらまず効果図を見てみます。

単一カウントダウン
コードをつけて、コードをつけます！！重点的に来ました
wxml:

//      -----wxml
<view class="countdown">
 <view class="item">
    ：
 <view class="txt-time">{{txtTime.hou}}</view>:
 <view class="txt-time">{{txtTime.min}}</view>:
 <view class="txt-time">{{txtTime.sec}}</view>
 </view>
</view>

css:

//      -----wxss
.countdown .item {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 200rpx;
 width: 90%;
 margin: 0 5%;
 border-bottom: 2rpx solid #eee;
}

.countdown .item .txt-time {
 background-color: #6EBEC7;
 color: #fff;
 border-radius: 10rpx;
 font-size: 28rpx;
 margin: 0 4rpx;
 font-weight: bold;
 height: 42rpx;
 width: 66rpx;
 line-height: 42rpx;
 text-align: center;
}

js:

//      -----js
Page({
 /**
 *        
 */
 data: {
 endTime: "2020-08-22 18:30:00",//    
 },

 //      10      
 timeFormat(param) {
 return param < 10 ? '0' + param : param;
 },
 //   
 singleCountDown: function () {
 var that = this;
 var time = 0;
 var obj = {};
 var endTime = new Date(that.data.endTime.replace(/-/g, "/")).getTime();//       
 var currentTime = new Date().getTime();//       
 time = (endTime - currentTime) / 1000;
 //        
 if (time > 0) {
 var hou = parseInt(time / (60 * 60));
 var min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
 var sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
 obj = {
 hou: that.timeFormat(hou),
 min: that.timeFormat(min),
 sec: that.timeFormat(sec)
 }
 } else { //     
 obj = {
 hou: "00",
 min: "00",
 sec: "00"
 }
 clearTimeout(that.data.timeIntervalSingle); //     
 }
 var timeIntervalSingle = setTimeout(that.singleCountDown, 1000);
 that.setData({
 timeIntervalSingle,
 txtTime: obj,
 })
 },

 /**
 *       --      
 */
 onLoad: function (options) {
 this.singleCountDown();//           
 },
})

複数のカウントダウン
wxml:

//        -----wxml
<view class="countdown">
 <block wx:for="{{timeList}}" wx:key="index">
 <view class="item">
 {{item.title}}：
 <view class="txt-time">{{item.time.hou}}</view>:
 <view class="txt-time">{{item.time.min}}</view>:
 <view class="txt-time">{{item.time.sec}}</view>
 </view>
 </block>
</view>

wxss:上のシングルカウントダウンスタイルと同じです。ここでは貼り出さないです。
js:

//        -----wxml
Page({
 /**
 *        
 */
 data: {
 timeList: [{//    
 title: "a   ",
 endTime: "2020-08-23 18:00:00",
 }, {
 title: "b   ",
 endTime: "2020-08-25 20:00:00",
 }, {
 title: "c   ",
 endTime: "2020-08-21 20:00:00",
 }],
 },

 //      10    0  
 timeFormat(param) {
 return param < 10 ? '0' + param : param;
 },
 //       
 severalCountDown: function () {
 var that = this;
 var time = 0;
 var obj = {};
 var timeList = that.data.timeList;
 //    ，    item      
 timeList.forEach(function (item) {
 var endTime = new Date(item.endTime.replace(/-/g, "/")).getTime();//       
 var currentTime = new Date().getTime();//       
 time = (endTime - currentTime) / 1000;
 //        
 if (time > 0) {
 var hou = parseInt(time / (60 * 60));
 var min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
 var sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
 obj = {
  hou: that.timeFormat(hou),
  min: that.timeFormat(min),
  sec: that.timeFormat(sec)
 }
 } else { //     
 obj = {
  hou: "00",
  min: "00",
  sec: "00"
 }
 clearTimeout(that.data.timeIntervalSeveral); //     
 }
 item.time = obj;
 })
 var timeIntervalSeveral = setTimeout(that.severalCountDown, 1000);
 that.setData({
 timeIntervalSeveral,
 timeList,
 })
 },

 /**
 *       --      
 */
 onLoad: function (options) {
 this.severalCountDown();//     
 },
})

エラー点：終了時間をタイムスタンプに変換する時は、特に時間文字列の「-」を「/」に置き換えることに注意してください。そうでなければ、iosでエラーが発生します。
暖かいヒント：タイマーはsetTimeout（）を使うことを推奨します。setintervalを勧めません。
はい、ここで単一または複数のカウントダウン表示機能を見たら成功します。具体的な様式は自分の要求によって修正すればいいです。
今注目度の高いWeChat小プログラムを紹介します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。