[读码时间] 简易网页时钟

说明：代码取自网络，注释为笔者学习时添加！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>简易网页时钟</title>
    <style>
        body,div{/*内外边距归零*/
            margin:0;
            padding:0;
        }
        body{
            color:#fff;/*字体颜色白色*/
            font:16px/1.5 \5fae\8f6f\96c5\9ed1;/*行高24px*/
        }
        #clock{
            width:300px;
            text-align:center;/*文本居中*/
            background:#1a1a1a;/*背景黑色*/
            margin:10px auto;/*左右居中*/
            padding:20px 0;
        }
        span{
            color:#000;/*字体黑色*/
            width:80px;
            line-height:2;/*系数为2，即2X16=32px*/
            background:#fbfbfb;/*白色*/
            border:2px solid #b4b4b4;/*灰色*/
            margin:0 10px;
            padding:0 10px;
        }
    </style>
    <script>
        window.onload = function () {
            var oClock = document.getElementById("clock");//获取div引用
            var aSpan = oClock.getElementsByTagName("span");//获取所有span元素

            setInterval(getTimes, 1000);//间歇调用，每隔10000毫秒，即1秒执行一次
            getTimes();//初次调用
            function getTimes() {
                var oDate = new Date();//创建一个新的date对象
                var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()];//数组，分别获取时、分、秒
                for (var i in aDate) aSpan[i].innerHTML = format(aDate[i]);//for循环，赋值时分秒给3个span元素
            }
            function format(a) {
                return a.toString().replace(/^(\d)$/, "0$1");//利用正则捕获组，如时分秒为个位数，则替换为前缀0+捕获组，比起之前看到过的网页时钟，是很高明的作法
            }
        }
    </script>
</head>
<body>
    <!--div包裹3个span元素-->
    <div id="clock">
        <span></span>点<span></span>分<span>秒</span>
    </div>
</body>
</html>
View Code

 

posted @ 2017-02-25 03:07  sx00xs  阅读(214)  评论(0)  编辑  收藏  举报