時間格式轉換

時間 2019-11-06

標籤時間格式轉換简体版

原文原文鏈接

時間格式轉換

先看一下須要實現的效果吧！
html

<!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>

簡單的實現了一下效果，樣式寫的有點囉嗦，大家能夠本身寫的簡潔一些哈！！！
上效果圖：flex