小程序：自定义组件倒计时（分三种状态：距离开始抢购倒计时、抢购中倒计时、抢购结束）一个自定义组件搞定

传入一个时间段（开始时间，结束时间），与系统时间比较，即可知道抢购状态（1、距离开始倒计时 2、抢购中倒计时 3、抢购结束），从而控制按钮

**

注意：博主代码中的系统时间为客户端时间，真正的需要倒计时抢购时，是需要获取服务器的时间的，不然用户客户端时间与服务器时间不同步时，可能会造成误抢或者到时间不能抢购…等等原因都是会出现的。

**

假设有这样一个需求：

某一商品有设定限时抢购时间段，在某个时间段内才能进行抢购，我需要倒计时距离商品开抢的时间（此时不能抢购），当时间为开抢时间是，我需要倒计时为抢购中的时间（此时可以抢购），当抢购结束后，我需要停止倒计时（此时不能抢购）

例如：

系统时间 （2019-08-03 12:11:00）

1. 传入两个值 2019-08-03 12:12:00 ，2019-08-03 12:12:30 ，‘
2. 会根据传入的时间段与系统时间进行比较，判断是 距离抢购倒计时、抢购中倒计时、抢购结束 这三种状态进行显示

那么会有如下的效果：
这是距离商品开抢的倒计时

这是商品抢购中的倒计时

这是商品倒计时结束的

这样我们就可以轻易的知道是否能进行抢购啦~

自定义组件的代码：

// 这是自定义组件中js的代码


var util = require("../../utils/util.js")

/**
 * 倒计时抢购自定义组件
 * (该组件传入两个时间值，即可显示抢购状态)
 * 抢购状态：抢购未开始倒计时、抢购中倒计时、抢购结束
 */

Component({

  data: {
    showTime: "", //显示时间
    showTxt: "", //显示内容
    rushState: false, //抢购状态

    startDate: "2019-08-03 12:32:00",
    endDate: "2019-08-03 12:32:30",
  },

  ready() {
    //开始时间必须要小于结束时间才去执行
    if (this.data.startDate < this.data.endDate) {
      this.countDown() //执行倒计时
    }
  },

  detached() {
    clearInterval(this.countDown()) // 页面被被销毁的时候，清除定时器
  },

  methods: {
    /**
     * 倒计时
     */
    countDown: function() {
      var interval = setInterval(function() {
        //判断抢购开始时间小于系统时间时，取抢购结束时间进行倒计时，否则取抢购开始时间倒计时
        var totalSecond = Date.parse(this.data.startDate <= util.formatTime(new Date) ? this.data.endDate : this.data.startDate) / 1000 - Date.parse(new Date()) / 1000;
        var second = totalSecond
        // 计算天
        var day = Math.floor(second / 3600 / 24)
        day = this.timeFormat(day)
        // 计算小时
        var hr = Math.floor((second - day * 3600 * 24) / 3600)
        hr = this.timeFormat(hr)
        // 计算分钟
        var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60)
        min = this.timeFormat(min)
        // 计算秒
        var sec = second - day * 3600 * 24 - hr * 3600 - min * 60
        sec = this.timeFormat(sec)

        totalSecond--;

        //开始时间大于系统时间，说明在-抢购未开始倒计时
        if (this.data.startDate > util.formatTime(new Date)) {
          this.setData({
            showTime: day + "天" + hr + "时" + min + "分" + sec + "秒",
            showTxt: "限时抢购倒计时：",
          })
          //开始时间小于等于系统时间，且系统时间小于结束时间 说明在-抢购中倒计时
        } else if (this.data.startDate <= util.formatTime(new Date) && util.formatTime(new Date) < this.data.endDate) {
          this.setData({
            showTime: day + "天" + hr + "时" + min + "分" + sec + "秒",
            showTxt: "限时抢购中：",
            rushState: true
          })
          //结束时间小于等于系统时间时，说明结束了 (后面还带了一个条件 totalSecond < 0，是防止开始时间倒计时结束之后不往下继续执行抢购中的倒计时)
        } else if (this.data.endDate <= util.formatTime(new Date) && totalSecond < 0) {
          clearInterval(interval); //清除定时器
          this.setData({
            showTime: "",
            showTxt: "限时抢购已结束!",
            rushState: false
          });
        }
      }.bind(this), 1000); //每隔一秒执行
    },

    //处理小于10以下的前面补0
    timeFormat(param) {
      return param < 10 ? '0' + param : param;
    },
  }
})





//这是自定义组件中wxml的代码

<!--倒计时抢购-->
<view class="count-down">
  <view class="count-down-txt">{{showTxt}}</view>
  <view class="count-down-time" hidden="{{showTime==''?true:false}}">{{showTime}}</view>
</view>

<button disabled="{{rushState?false:true}}" style="width:100%;" size="mini">立即抢购</button>




//这是自定义组件中wxss的代码

.count-down {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(197, 148, 148);
}

.count-down-txt {
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  line-height: 50rpx;
}

.count-down-time {
  font-size: 25rpx;
  padding: 10rpx;
  color: rgb(202, 0, 0);
  background-color: rgb(223, 190, 160);
  border-radius: 20rpx;
}

引用自定义组件的代码

//这是引用自定义组件的wxml

<!--倒计时  -->
<count></count>



//这是引用自定义组件的json

{
  "usingComponents": {
    "count": "/components/time/index"
  }
}

怕对一些刚入门的小白造成困扰，最后贴张目录图吧

如果需要测试代码的话，别忘了util.js里面的 “/” 改为 “-” 哦， 时间需要格式需要一致

最后说明，第一次写博客，记录一下自己遇到的一些问题，代码中有什么不对的地方，希望老哥们可以帮我指出，我会加以改正。