위 챗 애플 릿 은 하나 이상 의 카운트다운 기능 을 실현 합 니 다.

위 챗 애플 릿 은 단일/여러 개의 카운트다운 디 스 플레이 를 실현 합 니 다.
단일 카운트다운
다 중 카운트다운사고:먼저 모든 카운트다운 의 종료 시간 을 얻 은 다음 에 종료 시간 과 현재 시간 을 시간 스탬프 로 바 꾸 고 종료 시간 을 현재 시간 에서 뺀 다음 에 1000(시간 스탬프 는 밀리초 급 이기 때 문)으로 나 누 면 바로 이 종료 시간 이 현재 시간의 초 수 를 계산 한 다음 에 공식 에 따라 시간 분 초 를 계산 한 다음 에 타이머 로 1 초 에 한 번 뛰 면 성공 합 니 다~
두 가지 카운트다운 사고의 차이 가 많 지 않 습 니 다.여러 개의 카운트다운 은 배열 절 차 를 옮 겨 다 니 며 배열 의 모든 대상 이 끝 나 는 시간 을 가 져 와 시간 을 계산 합 니 다.
됐어!생각 을 말 하고 효과 도 를 올 려 보 겠 습 니 다.

단일 카운트다운
코드 올 려,코드 올 려!!포인트 가 왔 습 니 다.
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 을 추천 하지 않 습 니 다.
자,여기 하나 이상 의 카운트다운 디 스 플레이 기능 을 보면 성공 합 니 다.구체 적 인 스타일 은 자신의 수요 에 따라 수정 하면 됩 니 다.
현재 관심 도가 높 은 위 챗 애플 릿 튜 토리 얼 을 추천 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.