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>
