在项目过程中经常会对日期格式进行一个处理,下面有两种情况:
- 存在已经知道的日期,希望转换成客户的需求并传递给后台,也就是对已有的日期格式进行加工
- 时间是客户端的本地时间,会时刻改变,我们需要把日期变成一个符合客户需求的日期格式
第一种情况:
let time = '2022-2-15 17:24:50'
//将时间字符串变为自己需要呈现的格式 如:
//2022年2月15日 17时25分12秒
//2022年2月15日
//02/15 17:25
//...
//1.replace写法
time.replace('-','年').replace('-','月').replace(' ','日').replace(':','时').replace(':','分')+"秒"
//2.获取年月日小时分钟秒这几个值后,最后想拼成什么效果就拼成什么效果
//基于indexOf获取索引,基于substring一点点截取
let time = '2022-2-15 17:35:04'
let indexY = time.indexOf('-')//年的索引
let indexM = time.lastIndexOf('-')//月份索引
let indexD = time.lastIndexOf(' ')//日索引
let indexClo = time.indexOf(':')//小时索引
let indexMin = time.lastIndexOf(':')//分钟索引
let year = time.substring(0,indexY)//获取年份
let month = time.substring(indexY+1,indexM)//获取月份
let day = time.substring(indexM+1,indexD)//获取日期
let clock = time.substring(indexD+1,indexClo)//获取小时
let minute = time.substring(indexClo+1,indexMin)//获取分钟
let seconds = time.substring(indexMin+1)//获取秒
console.log(year,month,day,clock,minute,seconds)
//基于split获方法进行一项一项拆分
let arr = time.split(' ')//['2022-2-15', '17:35:04']
let bigTime = arr[0].split('-')//['2022', '2', '15']
let dateTime = arr[1].split(':')//['17', '35', '04']
//利用正则开挂:
let arr = time.split(/(?: |-|:)/g) //['2022', '2', '15', '17', '35', '04']
//补充个方法,不足两位数补0
let addZero = val => val.length<2? '0'+val : val;
time = arr[0] + "年" + addZero(arr[1]) + "月" + addZero(arr[2]) + "日"
console.log(time)//2022年02月15日
第二种情况:
<!--时钟案例-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#clockBox{
position: absolute;
right: 0;
top: 0;
padding: 3px 15px;
line-height: 46px;
font-size: 16px;
color: white;
/* 设置背景渐变色 */
background: black;
background: -webkit-linear-gradient(top left,#ffa5a5,#854ae5,#663fbb);
}
</style>
</head>
<body>
<div id="clockBox">
2022年2月17日 星期四 16:35
</div>
<script>
let clockBox = document.getElementById("clockBox");
/*
queryDate:获得日期转换为想要的格式
@params:
@return:
by Zack on 2022年2月17日
*/
function queryDate(){
let time = new Date(),
year = time.getFullYear(),
month = time.getMonth() + 1,
day = time.getDate(),
week = time.getDay(),
hours = time.getHours(),
minutes = time.getMinutes(),
seconds = time.getSeconds();
let result = year + "年" + addZero(month) + "月" + addZero(day) + "日";
let weekArr = ['日','一','二','三','四','五','六']
result += " 星期" + weekArr[week] + " "
result += addZero(hours) + ":" + addZero(minutes) + ":" + addZero(seconds)
clockBox.innerHTML = result
}
//定时器控制运动:每隔1000ms执行一次queryDate方法
setInterval(queryDate, 1000);
/*
addZero:不足两位数不零
@params:
value 需要补0的值
@return:
补完后的vlaue
by Zack on 2022年2月17日
*/
function addZero(val){
val = Number(val)
return val <10 ? "0" + val : val
}
</script>
</body>
</html>