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>运行代码