JS简易时钟

最新推荐文章于 2024-09-29 11:29:55 发布

weixin_34085658

最新推荐文章于 2024-09-29 11:29:55 发布

阅读量61

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangyeye14/p/6169896.html

版权

HTML

<div id="clock">
    <span></span>：<span></span>：<span></span>
</div>

CSS

　　　　*{
            margin: 0;
            padding: 0;
            border: 0;
        }
        #clock{
            width: 300px;
            line-height: 60px;
            text-align: center;
            background: deepskyblue;
            margin: 0 auto;
        }
        span{
            width: 80px;
            line-height: 2;/*设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数*/
            background: lightblue;
            border: 2px solid green;
            padding: 0 10px;
        }

Javascript

        window.οnlοad=function(){
            var clock = document.getElementById("clock");
            var current = document.getElementsByTagName("span");
            setInterval(getTimes,1000);
            getTimes();
            
            function getTimes(){
                var now = new Date();
                var count = [now.getHours(),now.getMinutes(),now.getSeconds()];
                for(var i in count){
                    current[i].innerHTML = format(count[i]);
                }
                function format(num){
                    return num.toString().replace(/^(\d)$/,"0$1");
                }
            }
        }