前端面试---时间转化
在日常开发中,我们需要对时间进行转化和处理,尤其是电商类的抽奖活动,抢购的活动,做不好就是线上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编写请写下来
优秀的人一直在路上,优秀的你一直在尝试写新bug