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

传入一个时间段(开始时间,结束时间),与系统时间比较,即可知道抢购状态(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里面的 “/” 改为 “-” 哦, 时间需要格式需要一致
在这里插入图片描述

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

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值