网页显示动态数字化时钟

[html]代码库
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>钟表</title>
        <script type="text/javascript">
            function getDou(number) {
                if(number < 10) {
                    return '0' + number;
                } else {
                    return number;
                }
            }
 
            function getWeek(week) {
                var sWeek = null;
                switch(week) {
                    case 0:
                        sWeek = '星期日'
                        break;
                    case 1:
                        sWeek = '星期一'
                        break;
                    case 2:
                        sWeek = '星期二'
                        break;
                    case 3:
                        sWeek = '星期三'
                        break;
                    case 4:
                        sWeek = '星期四'
                        break;
                    case 5:
                        sWeek = '星期五'
                        break;
                    case 6:
                        sWeek = '星期六'
                        break;
                    default:
                        break;
                }
                return ' ' + sWeek;
            }
            window.onload = function() {
                var oDate = document.getElementsByTagName("p")[0];
                var oTime = document.getElementsByTagName("p")[1];
 
                function tick() {
                    var date = new Date();
                    var sDate = null;
                    var sTime = null;
                    var hours = date.getHours();
                    if(hours > 12) {
                        hours %= 12;
                        sTime = '下午 ';
                    } else {
                        sTime = '上午 ';
                    }
                    sTime += getDou(hours) + ':' + getDou(date.getMinutes()) + ':' + getDou(date.getSeconds());
                    sTime += getWeek(date.getUTCDay());
                    oTime.innerHTML = sTime;
 
                    sDate = date.getUTCFullYear() + "年";
                    if(date.getUTCMonth() < 9) {
                        sDate += '0' + (date.getUTCMonth() + 1) + "月";
                    } else {
                        sDate += (date.getUTCMonth() + 1) + "月";
                    }
                    sDate += date.getUTCDate() + "日";
                    oDate.innerHTML = sDate;
                }
 
                setInterval(tick, 1000);
                tick();
            }
        </script>
        <style type="text/css">
            body {
                width: 800px;
                height: 500px;
                background: #FCF;
                vertical-align: middle;
                display: table-cell;
            }
 
            .date {
                text-align: center;
                color: white;
                font-size: 50px;
            }
 
            .time {
                text-align: center;
                color: white;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <div>
            <p class="date">
                日期
            </p>
            <p class="time">
                时间
            </p>
        </div>
    </body>
</html>
[代码运行效果截图]
[源代码打包下载]
用户注册

用户登录

发表随想

该用户最新代码

编程随想

[html]代码库

[代码运行效果截图]

[源代码打包下载]

网友评论 (发表评论)

回复评论

发表评论：

评论须知：

扫码下载

输入口令后可复制整站源码
