时间格式转换

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

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)

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

上效果图:

技术
今日推荐
阅读数 169685
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信