用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - html代码库

网页显示动态数字化时钟

2019-03-12 作者: 哈鬼举报

[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>

[代码运行效果截图]


网页显示动态数字化时钟

[源代码打包下载]




网友评论    (发表评论)

共1 条评论 1/1页

发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

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

加载中,请稍后...