<!DOCTYPE html> <html> <head> <title>clock1</title> <script> function timeDisplay() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); divDisplay("h",h); divDisplay("m",m); divDisplay("s",s); h = checkTime(h); m = checkTime(m); s = checkTime(s); document.getElementById("txt").innerHTML = h + ":" + m + ":" + s; t = setTimeout(function(){timeDisplay()},1000); } function checkTime(i) { if(i<10) i = "0" + i; return i; } function divDisplay(divId,num) { var divDs=""; var mod = num % 5; if(divId=="h") //hours { if(num>12) { num -= 12; } for(var i = 0; i < 12; ++i) { if(i < 12 - num) divDs += "<div class='emp'></div>"; else divDs += "<div class='" + divId + "'></div>"; } } else //minutes and seconds { for(var j = 0; j < 12; ++j) { if(num == 0) num = 60; if(j< 12 - (num+4)/5) //上方空白区 divDs +="<div class='emp'></div>"; else if(j == 12 - (num+4)/5 ) //5s为一个单位,1~5s方框不断变高 divDs += oneDiv(divId,mod); else //底部 divDs += "<div class='" + divId + "'></div>"; } } document.getElementById(divId).innerHTML = divDs; } function oneDiv(divId,n) { var showDiv=""; switch(n) { case 0: showDiv += "<div class='" + divId + "'></div>"; break; case 1: for(var i = 0; i < 4; ++i) showDiv += "<div class='empS'></div>"; showDiv += "<div class='" + divId + "S'></div>"; break; case 2: for(var i = 0; i < 3; ++i) showDiv += "<div class='empS'></div>"; for(var i = 0; i < 2; ++i) showDiv += "<div class='" + divId + "S'></div>"; break; case 3: showDiv += "<div class='empS'></div><div class='empS'></div>"; for(var i = 0; i < 3; ++i) showDiv += "<div class='" + divId + "S'></div>"; break; case 4: showDiv += "<div class='empS'></div>"; for(var i = 0; i < 4; ++i) showDiv += "<div class='" + divId + "S'></div>"; break; } return showDiv; } </script> <style> div{float:left;} .h{width:100px;height:28px;border:1px white solid;background-color:red;} .m{width:100px;height:28px;border:1px white solid;background-color:green;} .s{width:100px;height:28px;border:1px white solid;background-color:blue;} .hS{width:100px;height:4px;border:1px white solid;background-color:red;} .mS{width:100px;height:4px;border:1px white solid;background-color:green;} .sS{width:100px;height:4px;border:1px white solid;background-color:blue;} .emp{width:100px;height:28px;border:1px white solid;} .empS{width:100px;height:4px;border:1px white solid;} #h,#m,#s{width:102px;height:360px;border:1px white solid;} #container{width:312px;} #txt{font-family:微软雅黑;font-size:77px;} </style> </head> <body onLoad="timeDisplay()"> <div id="container"> <div id="h"></div> <div id="m"></div> <div id="s"></div> <p id="txt"></p> </div> </body> </html>