时间格式转换
先看一下需要实现的效果吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body #date {
height: 200px;
width: 200px;
background: #f5f5f5;
display: flex;
flex-direction: column;
align-items:center;
justify-content: center;
}
.hours{
display: flex;
}
.time{
width: 30px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
margin: 0 3px;
}
.time:nth-child(1){
background: red;
}
.time:nth-child(2){
background: blue;
}
.time:nth-child(3){
color: #000;
margin: 0;
}
.time:nth-child(4){
background: orange;
}
.time:nth-child(5){
background: greenyellow;
}
.day{
line-height: 3em;
}
</style>
</head>
<body>
<div id="date"></div>
<script>
function DateDiff2(type) { // type(TIME 时分; DAY 年月日)
let date = new Date(); // 当前时间
let year = date.getFullYear(); // 年
let month = date.getMonth(); // 月
let day = date.getDate(); //日
let hours = date.getHours(); // 时
let minutes = date.getMinutes(); // 分
let newmonth = month < 10 ? "0" + (month + 1) : (month + 1);
let newday = day < 10 ? "0" + day : day;
let newHours = hours < 10 ? "0" + hours : hours;
let newMinutes = minutes < 10 ? "0" + minutes : minutes;
if(type == 'TIME')
return newHours + ":" + newMinutes
else if(type == 'DAY')
return "<div class='day'>" + year + "." + newmonth + "." + newday + "</div>"
}
setInterval(function() {
let date = DateDiff2('TIME');
let str = '<div class="hours">'
for(let i = 0; i < date.length; i ++) {
str += '<div class="time">' + date[i] + '</div>'
}
str += '</div>' + DateDiff2('DAY')
document.getElementById('date').innerHTML = str
}, 1000)
</script>
</body>
</html>
简单的实现了一下效果，样式写的有点啰嗦，你们可以自己写的简洁一些哈！！！
上效果图：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。