简易网页始终

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
    *{margin: 0px;padding: 0px;}
    body{padding: 100px;font-size: 16px;font-weight: bold;color: #fff;}
    #box{width:300px;text-align:center;background:#1a1a1a;padding:20px 0;}
    span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}

</style>
<script>
    window.onload=function(){
        var aSpan = document.getElementsByTagName('span');

        function getTimes(){
            var oDate = new Date();
            var aDate = [oDate.getHours(),oDate.getMinutes(),oDate.getSeconds()];
            for(var i in aDate){
                aSpan[i].innerHTML = format(aDate[i]);
            }
        };

        function format(a){
            return a.toString().replace(/^(d)$/,'0$1');
        };

        getTimes();
        setInterval(getTimes,1000);
    }
</script>
</head>
<body>
    <div id="box">
        <span>0</span>点<span>0</span>分<span>0</span>秒
    </div>
</body>
</html>

效果如下图所示：

学习要点：

Date()/toString()/定时器

高否？富否？帅否？否？滚去学习！