极简风Js时钟

作者: zhaoolee | 来源:发表于2018-03-21 16:31 被阅读137次

极简风Js时钟
苹果Mac桌面时钟推荐：OneClock提供多种样式和自定义选项
简黑时钟 for Mac(自定义全屏时钟软件)v1.6中文版
日式极简风家居——不单单有MUJI
【简书推荐】极简时钟：Fliqlo！
极简风
极简风
做了一个时钟统计类应用，支持iOS14 小组件
js 时钟
2017-06-15

Js时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时显示</title>

    <style>
        html *{

            margin: 0;
            padding: 0;

        }

        body{

            background-color: #fdf6e3;
            height: 100vh;
            display: flex;
            align-items: center;

        }

        section{
            text-align: center;
            font-size: 55px;
            font-style: bold;
            color: #509839;
            flex: 1 0 auto
        }



    </style>

    <script>
        window.onload = function(){

            function getCurrentTime(){

                var dt = new Date();


                // 获取年份
                
                var CurrentYear = dt.getFullYear();

                // 获取月份
                var CurrentMonth =  dt.getMonth() + 1;
                // 获取日
                var CurrentDay = dt.getDate();
                // 获取小时
                var CurrentHour = dt.getHours();
                // 获取分钟
                var CurrentMinter = dt.getMinutes();
                // 获取秒
                var CurrentSeconds = dt.getSeconds();

                var dataArray = [CurrentYear, CurrentMonth, CurrentDay, CurrentHour, CurrentMinter, CurrentSeconds]

                // 保持稳定的两位数
                for (let i = 0; i<dataArray.length; i++){
                    if (dataArray[i] <= 9){
                        console.log("==>", dataArray[i]);
                        dataArray[i] = "0" + dataArray[i];
                        console.log(dataArray[i], "<==");
                    }
                }
                return dataArray
            }

            var eleYMD = document.getElementById('YMD');
            var eleHMS = document.getElementById('HMS');

            function showTime(){

                let dataArray = getCurrentTime()

                var Ymd = dataArray[0]+"年"+dataArray[1]+"月"+dataArray[2]+"日";

                var Hms = dataArray[3]+"时"+dataArray[4]+"分"+dataArray[5]+"秒";

                eleYMD.innerHTML = Ymd;
                eleHMS.innerHTML = Hms;


            }
            // 避免页面启动短暂空白;
            showTime();

            setInterval(showTime, 1000);
        }
    </script>
</head>
<body>

    <section id="YMD"></section>
    <section id="HMS"></section>

</body>
</html>