前端面试---时间转化

在日常开发中，我们需要对时间进行转化和处理，尤其是电商类的抽奖活动，抢购的活动，做不好就是线上bug,也有很多坑

首先看下面一道面试题：

<script>
// 2019-3-6 面试题，时间格式转化
    let data= {
        create_time:'2019-02-05T08:14:28.000Z'
    };
    // 将上面的时间进行格式化，按照入参形式返回一下3种形式
    
    // 第一种
    let time1 = '2019-02-05'

    // 第二种 
    let time2 = '2019-02-05 08:14:28'

    // 第三种

    let time3 = '2019年02月05日 上午8点14分'
    // 请在下面函数补充完整
    function getTime(time,type){

    }
</script>

此问题来自小程序的云开发过程，在小程序云开发中，我们需要添加一个属性，类型为date,在操作窗口时，显示正常，但是显示中就是上面的data.create_time，前端需要转化处理，这里大家是不是第一反应就是filter,没错，如果用了vue,react，angular都可以去过滤；而小程序过滤有点区别；这里不讲了，进入今天面试题的主流程

var formatDate = function (timestamp, option) {
  var date = getDate(timestamp);
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = function () {
    if (date.getHours() < 10) {  //补‘0’
      return '0' + date.getHours()
    }
    return date.getHours();
  }
  var minute = function () {
    if (date.getMinutes() < 10) {
      return '0' + date.getMinutes()
    }
    return date.getMinutes();
  }
  var second = function () {
    if (date.getSeconds() < 10) {
      return '0' + date.getSeconds()
    }
    return date.getSeconds();
  }

  if (option == 'notime') {  //不需要时间
    return year + '-' + month + '-' + day;
  }

  return year + '-' + month + '-' + day + ' ' + hour() + ':' + minute() + ":" + second();
}

module.exports = {
  formatDate: formatDate,
};

1.注意上面的实现方法是基于小程序的时间方法，并不是js;

2.上面的代码我们实现前两种输入

var formatDate = function (timestamp, option) {
  var date = getDate(timestamp);
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = function () {
    if (date.getHours() < 10) { 
      if(option==3){
        if (0<date.getHours()&&date.getHours()<6){
          return '凌晨'+date.getHours()
        }
        if (6<=date.getHours()&&date.getHOurs()<=12){
          return '上午' + date.getHours()
        } 
        if (date.getHours()<18){
          return '下午' + date.getHours()
        }
        if(date.getHours()<=24){
          return '晚上' + date.getHours()
        }
      } //补‘0’
      return '0' + date.getHours()
    }
    return date.getHours();
  }
  var minute = function () {
    if (date.getMinutes() < 10) {
      return '0' + date.getMinutes()
    }
    return date.getMinutes();
  }
  var second = function () {
    if (date.getSeconds() < 10) {
      return '0' + date.getSeconds()
    }
    return date.getSeconds();
  }

  if (option == 'notime') {  //不需要时间
    return year + '-' + month + '-' + day;
  }
  if (option==3){
    return year+'年'+month+'月'+day+' '+hour()+'时'+minute()+'分'
  }
  return year + '-' + month + '-' + day + ' ' + hour() + ':' + minute() + ":" + second();
}

module.exports = {
  formatDate: formatDate,
};

显示就是下面的日期

好了，小程序的算是告一段落了，下面进入js时代：

<script>
    let data = {
        create_time: '2019-02-05T08:14:28.000Z'
    };
    let time1 = 'YYYY-MM-DD'
    let time2 = 'YYYY-MM-DD HH:MM:SS'
    let time3 = '2019年02月05日 上午8点14分'
    function getTime(time, type) {
        let date = new Date(time)
        const year = date.getFullYear(time)
        const month = date.getMonth(time) + 1
        const day = date.getDate(time)
        const hour = date.getHours(time)
        const minute = date.getMinutes(time)
        const second = date.getSeconds(time)
        switch (type) {
            case 'YYYY-MM-DD':
                return [year, month, day].map(formatNumber).join('-')
                break;
            case 'YYYY-MM-DD HH:MM:SS':
                return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
                break;
            default:
                let halfDay = hour > 12 ? '下午' : '上午'
                return year + '年' + month + '月' + day + '日 ' + halfDay + hour + '时' + minute + '分'
                break;
        }

    }
    const formatNumber = n => {
        n = n.toString()
        return n[1] ? n : '0' + n
    }
    let s1=getTime(data.create_time,time1)
    console.log(s1)
    let s2=getTime(data.create_time,time2)
    console.log(s2)
    let s3=getTime(data.create_time,time3)
    console.log(s3)

</script>

总结知识点：

1.三元运算符使用

2.switch使用

3.Date对象的使用， 获取年 getFullYear(),获取月份getMonth()，注意这里+1

4.数组的结合使用

 

优化上面的代码

<script>
      let data = {
        create_time: "2019-02-05T08:14:28.000Z"
      };
      /*
      *  时间转化函数
      *  2019-3-7
      *  by xingguangbi
      *  params {time,type }
      *     type:{
              0:'YYYY-MM-DD',
              1: 'YYYY-MM-DD HH:MM:SS',
              2:'YYYY年MM月DD日 HH时MM分ss秒'
              3：'YYYY年MM月DD日 上午/下午/晚上/凌晨HH时
            }
      */
      function getTime(time, type) {
        let date = new Date(time);
        const year = date.getFullYear(time);
        let month = date.getMonth(time) + 1;
        if (month < 10) {
          month = "0" + month;
        }
        let day = date.getDate(time);
        if (day < 10) {
          day = "0" + day;
        }
        let hour = date.getHours(time);
        let pre = "";
        if (6 <= hour && hour <= 12) {
          pre = "上午";
        }
        if (12 < hour && hour <= 18) {
          pre = "下午";
        }
        if (18 < hour && hour <= 24) {
          pre = "晚上";
        }
        if (0 <= hour && hour < 6) {
          pre = "凌晨";
        }
        if (hour < 10 && type != 3) {
          hour = "0" + hour;
        }
        let minute = date.getMinutes(time);
        if (minute < 10) {
          hour = "0" + minute;
        }
        let second = date.getSeconds(time);
        if (second < 10) {
          second = 0 + 10;
        }
        switch (type) {
          case 0:
            return year + "-" + month + "-" + day;
            break;
          case 1:
            return (
              year +
              "-" +
              month +
              "-" +
              day +
              " " +
              hour +
              ":" +
              minute +
              ":" +
              second
            );
            break;
          case 2:
            return (
              year +
              "年" +
              month +
              "月" +
              day +
              "日 " +
              hour +
              "时" +
              minute +
              "分" +
              second +
              "秒"
            );
            break;
          default:
            return year + "年" + month + "月" + day + "日 " + pre + hour + "时";
            break;
        }
      }
      let s1 = getTime(data.create_time, time1);
      console.log(s1);
      let s2 = getTime(data.create_time, time2);
      console.log(s2);
      let s3 = getTime(data.create_time, time3);
      console.log(s3);
      console.log(getTime(data.create_time, 3));
    </script>

今日面试题：

图中的箭头你有几种实现方式，css编写请写下来