1. 程式人生 > >微信小程式設定倒計時效果

微信小程式設定倒計時效果

效果
在這裡插入圖片描述

微信小程式設定倒計時步驟

1.設定一個定時器,然後將時間設為一秒
2.在這個函式裡將當前時間距終止的時間,的時間戳的差值減一
3.計算剩餘的時間,還剩的時分秒等
4.將計算的時間儲存到data中

一定要計算後的結果,一定要儲存,不然倒計時沒有效果

話不多說,上程式碼

Page({
  data: {
    intervarID: '',//定時器名字
    time_diff:0,//時間差
    day: 0,//天
    hourse: 0,//小時
    minute: 0,//分
    second: 0,//秒
    },
	//定時器
  countDown: function () {
    var that = this;
    var now_time = that.data.time_diff;//獲取時間差
    this.data.intervarID = setInterval(function () {//設定定時器
      //將時間差減一秒
      now_time--;
	  //計算天時分秒
      let d = Math.floor((now_time - (now_time % 86400)) / 86400);
      let h = Math.floor((now_time % 86400) / 3600);
      let m = Math.floor((now_time % 3600) / 60);
      let s = now_time % 60;
      //將計算結果儲存至data
      that.setData({
        day: d,
        hourse: h,
        minute: m,
        second: s,
      });
      //當時間差為0時,清除定時器
      if (d <= 0 && h <= 0 && m <= 0 && s <= 0) {
        clearInterval(that.data.intervarID);
      }
    }, 1000
    )
  },
   /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
  //定時器開始
  this. countDown();
  },
)