JS&React 由时间表衍生出来的关于时间的处理

剩余时间戳转化

var toHHmmss = function (data) {
        var s;
        var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = (data % (1000 * 60)) / 1000;
        s = (hours < 10 ? ('0' + hours) : hours) + ':' + (minutes < 10 ? ('0' + minutes) : minutes) + ':' + (seconds < 10 ? ('0' + seconds) : seconds);
        return s;
    }

关于ios系统兼容问题

由于系统的不同，android与ios的 时间转化是有一些不同的

1. new Date(time) 中 time 一般格式是 YY-MM-DD HH:MM:SS 的，但是ios new Date(time) 中的 time 格式是 YY/MM/DD HH:MM:SS 并不识别 - 所以会导致 Invalid Date
   解决方法：new Date(‘2020-9-26 12:00:01’.replace(/-/g, “/”)) 将所有的 - 转化为 / 即可
2. new Date(time) 中 time 的 HH 在android中是 01 - 24 区间的 而在ios中则是 00 - 23 为区间，凌晨的小时计算就有可能出现负数的情况，导致报错
   解决方法：如果要计算的话，最好将凌晨(00:00 / 24:00)修改为 23:00 + 1h ，从而解决问题

new Date(time) 转化时间戳

(new Date(time)).valueOf()

时间表计算(早上6点 - 晚上24点，显示六组，每组间隔2H)

  // 初始化时间表
  initTimeData() {
    let data = [] // 时间表存储数组
    let nowDate = new Date()
    let nowHour = nowDate.getHours()
    let nowTime = nowHour % 2 === 1 ? nowHour - 1 : nowHour
    addDataArr(1, nowTime)
    function addDataArr(num, hour) {
      if (hour < 6) return addDataArr(num, 24)
      let newHour = hour > 24 ? hour - 24 + 4 : hour === 24 ? 0 : hour
      let time = newHour < 10 ? `0${newHour}:00` : `${newHour}:00`
      data.push({
        time,
        type: newHour === (nowTime <= 5 ? 0 : nowTime) ? 1 : 2
      })
      if (num < 6) {
        addDataArr(num + 1, hour + 2)
      }
    }
    this.setState({
      timeData: data,
      nowTime: this.getNowTime()
    },() => this.setTime())
  }
  
  // 时间计时处理
  setTime(){
  	let that = this
    let nextTime = this.state.timeData[1].time.split(':')[0]
    let nowTime = new Date()
    let futrueTime = (new Date(`${nowTime.getFullYear()}-${nowTime.getMonth() + 1}-${nowTime.getDate()} ${nextTime === '00' ? '00' : nextTime}:00`.replace(/-/g, '/'))).valueOf()
    let oneHours = 60 * 60 * 1000
    let lastTime = ((futrueTime + (nextTime === '00' ? oneHours : 0)) - new Date().valueOf()) / 1000
    if(isNaN(lastTime) || lastTime < 0) return
    let timer = setTimeout(() => {
      console.log('计算时长+3s后重新计算规划当前时间表，并调用父组件事件进行数据更新', lastTime)
      that.initTimeData()
      that.props.refreshTimeList()
      clearTimeout(timer)
    }, (lastTime + 3) * 1000);
  }

上面这两个方法，简单来说就是创建一个时间表，并在接近下一轮时间段的情况下，进行 重新计算时间表( this.initTimeData() )，并通知上层父组件时间表刷新后进行相应列表的数据请求( that.props.refreshTimeList() )

其他

格式化 天:时:分:秒

// 格式化 天:时:分:秒 参数 - 剩余时间戳 - 单位为 S
function formateSeconds(endTime) {
  let secondTime = parseInt(endTime) //将传入的秒的值转化为Number
  let min = 0 // 初始化分
  let h = 0 // 初始化小时
  let d = 0 // 初始化天
  let result = ''
  if (secondTime > 60) {
    //如果秒数大于60，将秒数转换成整数
    min = parseInt(secondTime / 60) //获取分钟，除以60取整数，得到整数分钟
    secondTime = parseInt(secondTime % 60) //获取秒数，秒数取佘，得到整数秒数
    if (min > 60) {
      //如果分钟大于60，将分钟转换成小时
      h = parseInt(min / 60) //获取小时，获取分钟除以60，得到整数小时
      min = parseInt(min % 60) //获取小时后取佘的分，获取分钟除以60取佘的分
      if (h > 23) {
        d = parseInt(h / 24) // 获取天，获取分钟除以24，得到整数天
        h = parseInt(h % 24) // 获取天后取佘的小时，获取时除24取佘的时
      }
    }
  }
  result = `${d.toString().padStart(2, '0')}:${h
    .toString()
    .padStart(2, '0')}:${min
    .toString()
    .padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`
  return result
  // return 00:00:00:00
}

如果转载，请标明出处～