Html5计时器实现电子表

来源：互联网发布：猎魔人小说知乎编辑：程序博客网时间：2024/05/01 20:28

应用计时器实现数字表的逻辑

<!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: black;                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>

计时器有一个需要注意的小地方：就是在setInterval(funn,mills);中的funn不是带括号，如果写成

setInterval(tick(), 1000);

ok，那么这个表只会走一次，函数只会被调用一次，也就是说这里仅仅是一次普通调用。

在Date中，getDate();获取天数，getMonths();获取月份，这里得到的是0-11，对应1月份-12月份 getDay();获取星期几，0-6对应星期日-星期六

1 0