小程序来个倒计时系列

前言

我们在一些商城(比如某东,某宝之类的)，或者小程序都会看见一些秒杀的商品，上面都有一些倒计时，看上去都非常的高级的样子。我们可以简单的来想一下，如果让你来做小程序的秒杀时间，你会怎样做？这里无非就是知道秒杀的截止时间，知道当前的时间，用来做个差是不是就出来了呢？我们可以先来动手试一下….

引入组件

首先，我们这里是做了个小程序里面商品的秒杀时间。我们想象中应该是非常的高级的样子，比如说下面这个样子

我们这里用的的是vant，如果不太清楚可以去了解一下。

https://youzan.github.io/vant-weapp/#/quickstart

​我们这里是全局引入: npm i @vant/weapp -S --production
接着在app.json或者页面对应的json中引入相应组件"van-count-down": "@vant/weapp/count-down/index"

开发ing

• 先把页面大致给弄出来：

<view class="seckill-text">
    <view class="seckill-title">限时秒杀</view>
    <van-count-down use-slot time="{{ seckillTime }}" bind:change="initTime" wx:if="{{seckillTime}}">
      <view class="seckill-data">
        //<text class="seckill-data-item" wx:if="{{seckillTime != 0}}">{{ timeData.days  }}</text>
        //<text class="text-white" wx:if="{{timeData.days != 0}}">天</text>
        <text class="seckill-data-item">{{ timeData.hours  }}</text>
        <text class="text-white">{{seckillTime == 0 ? '' : ':'}}</text>
        <text class="seckill-data-item">{{ timeData.minutes }}</text>
        <text class="text-white">{{seckillTime == 0 ? '' : ':'}}</text>
        <text class="seckill-data-item">{{ timeData.seconds  }}</text>
       // <text class="text-white">{{seckillTime == 0 ? '' : ':'}}</text>
      </view>
    </van-count-down>
 </view>

• 对应的js

  /**
   * 页面的初始数据
   */
  data: {
    seckillTime: '', // 倒计时 单位:毫秒
    timeData: {}, // 倒计时展示数据
    dateEnd:'',// 截至时间
    dateStart:'', // 当前时间
  },

initTime(e) {
//这种一般是有天-时-分-秒，大多数情况下我们是不需要的

  //   if (e.detail.days < 10) e.detail.days = '0' + e.detail.days
  //   if (e.detail.hours < 10) e.detail.hours = '0' + e.detail.hours
  //   if (e.detail.minutes < 10) e.detail.minutes = '0' + e.detail.minutes
  //   if (e.detail.seconds < 10) e.detail.seconds = '0' + e.detail.seconds
  //   this.setData({
  //     timeData: e.detail,
  //   });
  
  //这种是只要：时-分-秒
  if(e.detail.days >= 1) {
      e.detail.hours = (e.detail.days*24) + e.detail.hours
      if (e.detail.days < 10) e.detail.days = '0' + e.detail.days
      if (e.detail.minutes < 10) e.detail.minutes = '0' + e.detail.minutes
      if (e.detail.seconds < 10) e.detail.seconds = '0' + e.detail.seconds
    }else {
    if (e.detail.days < 10) e.detail.days = '0' + e.detail.days
      if (e.detail.hours < 10) e.detail.hours = '0' + e.detail.hours
      if (e.detail.minutes < 10) e.detail.minutes = '0' + e.detail.minutes
      if (e.detail.seconds < 10) e.detail.seconds = '0' + e.detail.seconds
    }
    this.setData({
       timeData: e.detail,
    });
  },

• 接着毫秒的计算：一般是后台会提供给你商品的截至时间，你再获取当前的时间，获取两者之差就可以了对吧。我们可以先来试试：

一般来说，我们会封装好处理时间的方法，到时候可以直接拿来用，比如下面这个样子的

function formatTime(date) {
  if (date == undefined) {
    return;
  }
  if (date == '') {
    return;
  }
  date = date.replace(/(\d{4})-(\d{2})-(\d{2})T(.*)?\.(.*)/, "$1/$2/$3 $4");
  date = new Date(date);
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

// 获取当前的时间--这个在请求该页面的时候就应该调用该方法
  getTime() {
    let date = new Date
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()
    let currentDate = year + '/' + ( month < 10 ? ( '0' + month ) : month ) + '/' + ( day < 10 ? ( '0' + day ) : day) + ' ' + (hour< 10 ? ( '0' +hour) :hour) + ':' + (minute< 10 ? ( '0' +minute) :minute) + ':' + (second< 10 ? ( '0' +second) :second) ;
    console.log(currentDate)
    this.setData({
      dateStart: currentDate
    })
  },
   //获取 时间差
  getDiffOfSecKill() {
      //let dateEnd = util.formatTime('这里是后端获取的时间').replace(/-/g, "/")  //这里处理时间为格式为:2021/03/18 15:05:40 不然不好直接处理
      //let dateTwo = new Date(this.data.dateEnd) //这里也是后端获取时间处理
      let dateTwo = new Date('2021/03/28 18:00:00') ; //测试---这里是自己写的时间
      let dateOne = new Date(this.data.dateStart) 
      let dateDiff = dateTwo.getTime() - dateOne.getTime()  //获取的毫秒数
      console.log('相差的时间=>',dateDiff)
      this.setData({
        seckillTime:dateDiff,
      })
      console.log('毫秒数=>',this.data.seckillTime)
    })
  },

/**
 * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this
    setTimeout(() => {
      that.setData({
        seckillTime: this.data.seckillTime
      })
    }, 2000);
  },
    /**
 * 生命周期函数--监听页面加载
   */
  onShow: function () {
    this.getTime()
    this.getDiffOfSecKill()
  },

• 接着看一下效果啦啦啦
  
  如果有什么问题，欢迎一起交流探讨哦！