前端计算加班时间/请假时间等一系列 结束时间 减去 初始时间 计算时差的一些相关问题

最近项目需求做的考勤模块，时间计算这一块用的比较频繁，难免也遇到了一些问题，记录一下碰到的壁和解决办法

管理系统中，考勤模块避免不了要做加班、出差、请假之类的时间计算，如下图，选择完初始时间和结束时间之后需要做一个自动计算工时的功能

 

思路：先获取到两个时间戳，分别转换成 XX天XX小时XX分钟XX秒 的形式，然后根据项目需求的不同计时单位进行不同处理

比如举例的这个例子是以小时为单位的，我需要获取到两个时间戳然后进行转换

<el-col :span="24">
  <el-form-item label="加班时间:" prop="start_date">
    <el-date-picker
      v-model="date"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期-时间"
      end-placeholder="结束日期-时间"
      @change="setime"
    >
    </el-date-picker>
  </el-form-item>
</el-col>

时间选择器处代码，需要在change回调处进行计算的处理，下面是处理时间的方法

      let date3 = this.date[1].getTime() - this.date[0].getTime()
      //计算出相差天数
      let days = Math.floor(date3 / (24 * 3600 * 1000))
      //计算出小时数
      let leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
      let hours = Math.floor(leave1 / (3600 * 1000))
      //计算相差分钟数
      let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
      let minutes = Math.floor(leave2 / (60 * 1000))
      //计算相差秒数
      let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
      let seconds = Math.round(leave3 / 1000)
      let matrixingMin =
        Number(days) * 24 * 60 + Number(hours) * 60 + Number(minutes)
      let matrixingHours = matrixingMin / 60

注释：date是存放开始时间和结束时间的数组，在data里面存放着 

data() {
    return {
      // 加班时间
      date: [],
    }
  },

处理完时间后，要在对数据保存之前进行一些判断，比如我们这个项目组规定的要求是，加班超过0.5个小时但是不满1个小时的情况，就按0.5个小时算，下面就是进行的判断处理

const fractionDigits = 1 // 保留1位小数
let result = +`${matrixingHours}e${fractionDigits}` 
result <<= 0 
result = +`${result}e${-fractionDigits}`
// 判断计算出来的工时最后一位是否等于5
if (String(result).substr(-1) < 5) {
  const fractionDigits = 0 // 保留0位小数
  let result = +`${matrixingHours}e${fractionDigits}` 
  result <<= 0 // 145
  result = +`${result}e${-fractionDigits}` 
  this.form.work_hours = result
} else {
  const fractionDigits = 0 // 保留0位小数
  let result = +`${matrixingHours}e${fractionDigits}`
  result <<= 0 // 145
  result = +`${result}e${-fractionDigits}`
  this.form.work_hours = result + '.5'
 // 如果得到的小数点后的一位大于五，先把字符串接去掉，手动加上".5"
}

以下是change回调的完整代码

    setime() {
      // console.log(this.date)
      this.form.start_date = this.formatDate(this.date[0])

      this.form.end_date = this.formatDate(this.date[1])
      let date3 = this.date[1].getTime() - this.date[0].getTime()
      //计算出相差天数
      let days = Math.floor(date3 / (24 * 3600 * 1000))
      //计算出小时数
      let leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
      let hours = Math.floor(leave1 / (3600 * 1000))
      //计算相差分钟数
      let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
      let minutes = Math.floor(leave2 / (60 * 1000))
      //计算相差秒数
      let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
      let seconds = Math.round(leave3 / 1000)
      let matrixingMin =
        Number(days) * 24 * 60 + Number(hours) * 60 + Number(minutes)
      let matrixingHours = matrixingMin / 60

      const fractionDigits = 1 // 保留1位小数
      let result = +`${matrixingHours}e${fractionDigits}` // 145.78
      result <<= 0 // 145
      result = +`${result}e${-fractionDigits}` // 1.45
      // 判断计算出来的工时最后一位是否等于5
      if (String(result).substr(-1) < 5) {
        const fractionDigits = 0 // 保留0位小数
        let result = +`${matrixingHours}e${fractionDigits}` // 145.78
        result <<= 0 // 145
        result = +`${result}e${-fractionDigits}` // 1.45
        this.form.work_hours = result
      } else {
        const fractionDigits = 0 // 保留0位小数
        let result = +`${matrixingHours}e${fractionDigits}` // 145.78
        result <<= 0 // 145
        result = +`${result}e${-fractionDigits}` // 1.45
        this.form.work_hours = result + '.5'
      }
    },

这其中formatDate()方法是将标准时间转换为yyyy-mm-dd HH:mm:ss格式的方法

    // 将标准时间转换为yyyy-mm-dd HH:mm:ss格式
    formatDate(time) {
      const date = new Date(parseInt(time.valueOf()))
      const year = date.getFullYear()
      const month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : `0${date.getMonth() + 1}`
      const day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`
      const hour = date.getHours() > 9 ? date.getHours() : `0${date.getHours()}`
      const minutes =
        date.getMinutes() > 9 ? date.getMinutes() : `0${date.getMinutes()}`
      const seconds =
        date.getSeconds() > 9 ? date.getSeconds() : `0${date.getSeconds()}`
      return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`
    },