©2020-2024 ioDraw All rights reserved
时间格式转换
先看一下需要实现的效果吧！
Document
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;
}
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 "
" + year + "." + newmonth + "." + newday + " "
}
setInterval(function() {
let date = DateDiff2('TIME');
let str = '
'
for(let i = 0; i < date.length; i ++) {
str += '
' + date[i] + ' '
}
str += '
' + DateDiff2('DAY')
document.getElementById('date').innerHTML = str
}, 1000)
简单的实现了一下效果，样式写的有点啰嗦，你们可以自己写的简洁一些哈！！！
上效果图：