<!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>