时钟

作者: 木利 | 来源:发表于2018-07-23 17:09 被阅读0次

Linux时钟命令用法及演示
苹果Mac桌面时钟推荐：OneClock提供多种样式和自定义选项
时钟
时钟
时钟
时钟
时钟
时钟
时钟
时钟

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #Xbody {
                width: 1100px;
                height: 500px;
                margin: 0 auto;
                border: 1px solid gray;
                overflow: hidden;
            }

            #Xbody>div {
                width: 120px;
                height: 120px;
                background: gold;
                border-radius: 60px;
                float: left;
                margin-left: 30px;
                margin-top: 30px;
                position: relative;
            }

            #Xbody>div>h1 {
                width: 100%;
                position: absolute;
                height: 100%;
                top: 0px;
                line-height: 80px;
                color: #FFFFFF;
                text-align: center;
            }

            #Xbody>div>h6 {
                width: 100%;
                position: absolute;
                height: 100%;
                top: 40%;
                color: #FFFFFF;
                text-align: center;
            }

            #Xbody>div>div {
                width: 94px;
                height: 94px;
                background: lightgray;
                border: 4px solid white;
                border-radius: 60px;
                float: left;
                overflow: hidden;
                margin-left: 9px;
                margin-top: 8.5px;
                overflow: hidden;
                position: relative;
            }

            #Xbody>div>div>div {
                width: 84px;
                height: 84px;
                background: #f1f1f1;
                border-radius: 49px;
                margin: 5px auto;
            }

            #Xbody>div>div>span {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                background: #f1f1f1;
                margin: 0 auto;
            }
        </style>
    </head>

    <body>
        <div id="Xbody">
            <div>
                <div id="yearDiv">
                    <div></div>
                    <span style="width: 70%;display: none;">
                    </span>
                </div>
                <h1 id="year">11</h1>
                <h6>year</h6>

            </div>
            <div>
                <div id="monthDiv">
                    <div></div>
                    <span style="width: 70%;display: none;">
                    </span>
                </div>
                <h1 id="month">11</h1>
                <h6>month</h6>

            </div>
            <div>
                <div id="daysDiv">
                    <div></div>
                    <span style="width: 70%;display: none;">
                    </span>
                </div>
                <h1 id="days">11</h1>
                <h6>days</h6>

            </div>
            <div>
                <div id="hoursDiv">
                    <div></div>
                    <span style="width: 60%;"></span>
                </div>
                <h1 id="hours">11</h1>
                <h6>hours</h6>

            </div>
            <div>
                <div id="minutesDiv">
                    <div></div>
                    <span style="width: 84%;"></span>
                </div>
                <h1 id="minutes">11</h1>
                <h6>minutes</h6>

            </div>
            <div>
                <div id="secondsDiv">
                    <div></div>
                    <span style="width: 85%;"></span>
                </div>
                <h1 id="seconds">11</h1>
                <h6>seconds</h6>
            </div>
            <div>
                <div id="milyonseconnetDiv">
                    <div></div>
                    <span style="width: 90%;"></span>
                </div>
                <h1 id="milyonseconnet">11</h1>
                <h6>milyonseconnet</h6>
            </div>
        </div>
    </body>

    <script>
        function ElemntDoc(id) {
            return document.getElementById(id);
        }

        function change(func) {
            if(func < 10) {
                func = "0" + func
            }
            return func
        }

        var milyonseconnet = ElemntDoc("milyonseconnet");
        var seconds = ElemntDoc("seconds");
        var minutes = ElemntDoc("minutes");
        var hours = ElemntDoc("hours");
        var days = ElemntDoc("days");
        var year = ElemntDoc("year");
        var month = ElemntDoc("month");

        var milyonseconnetDiv = ElemntDoc("milyonseconnetDiv");
        var secondsDiv = ElemntDoc("secondsDiv");
        var minutesDiv = ElemntDoc("minutesDiv");
        var hoursDiv = ElemntDoc("hoursDiv");
        var daysDiv = ElemntDoc("daysDiv");
        var yearDiv = ElemntDoc("yearDiv");
        var monthDiv = ElemntDoc("monthDiv");

        var milyonseconnetDivI = 0;
        var secondsDivI = 0;
        var minutesDivI = 0;
        var hoursDivI = 0;
        var daysDivI = 0;
        var yearDivI = 0;
        var monthDivI = 0;

        setInterval(function() {
            var time = new Date();
            milyonseconnet.innerHTML = time.getMilliseconds();
            seconds.innerHTML = change(time.getSeconds());
            minutes.innerHTML = change(time.getMinutes());
            hours.innerHTML = change(time.getHours());
            days.innerHTML = change(time.getDate());
            year.innerHTML = time.getFullYear();
            month.innerHTML = change((time.getMonth()+1));

            milyonseconnetDiv.style.transform = "rotate("+ (time.getMilliseconds()*0.36 - 90) + "deg)";
            secondsDiv.style.transform = "rotate("+ (time.getSeconds()*6 - 90) + "deg)";
            minutesDiv.style.transform = "rotate("+ (time.getMinutes()*6 - 90) + "deg)";
            hoursDiv.style.transform = "rotate("+ (time.getHours()*15 - 90) + "deg)";

        })
    </script>

</html>