共计 1531 个字符，预计需要花费 4 分钟才能阅读完成。
时间格式转换
先看一下需要实现的效果吧！
<!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>
简单的实现了一下效果，样式写的有点啰嗦，自己写的简洁一些哈！！！
上效果图：
希望对大家有帮助，感觉有用的给个赞呗！
正文完