电子表clock

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 74 阅读

文章标签：

html结构：
   <div><span></span>时<span></span>分<span></span>秒</div>

js代码简介：
时间处理
     创建日期对象 var oDate = new Date（）；
     将获取的时分秒存储在数组中 var aDate = [oDate.getHours(), oDate.getMinutes(),oDate.getSeconds()];
     将aDate添加到span元素中。
     function create() {
        var oDate = new Date();
        var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()];
        for (var i in aDate) {
             spans[i].innerHTML = format(aDate[i]);
         }
     }
格式化处理
如果是一位数字，向前补零处理
function format(str){
   return str.toString().replace(/^(\d)$/,"0$1");
}
初始化
function init() {create();
   setInterval(function () {create();}, 1000);
}

<!DOCTYPE html> <html> <head> <title>电子表clock---www.cnblogs.com/kuikui</title> <style type="text/css"> #test{ width:200px;} .clock{ width:100%; background:#000;padding:20px 0; color:#fff; text-align:center; font-size:15px;} .clock span{ text-align:center; background:#fff; color:#000; font-size:15px;border:2px solid #b4b4b4;margin:0 6px;padding:0 6px} </style> <script type="text/javascript"> var clock = function (obj) { var div = document.createElement("div"); div.className = "clock"; div.innerHTML = "<span></span>时<span></span>分<span></span>秒"; obj.appendChild(div); spans = div.getElementsByTagName("span"); function format(str) { return str.toString().replace(/^(\d)$/, "0$1"); } function create() { var oDate = new Date(); var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()]; for (var i in aDate) { spans[i].innerHTML = format(aDate[i]); } } function init() { create(); setInterval(function () { create(); }, 1000); } init(); } </script> </head> <body> <div id="test"> </div> <script type="text/javascript"> new clock(document.getElementById("test")); </script> </body> </html>

运行代码