html时间格式转换,时间格式转换

时间格式转换

先看一下需要实现的效果吧！

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)

简单的实现了一下效果，样式写的有点啰嗦，你们可以自己写的简洁一些哈！！！

上效果图：