<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<!-- 样式表 -->
<style>
.div1 {
background: #999999;
width: 20px;
height: 20px;
}
.left-top {
background: #ffffff;
width: 20px;
height: 81px;
position: absolute;
}
.right-top {
background: #ffffff;
width: 20px;
height: 89px;
position: absolute;
left: 115px
}
.left-bottom {
background: #ffffff;
width: 20px;
height: 89px;
margin-top: 3px;
position: absolute;
top: 92px
}
.right-bottom {
background: #ffffff;
width: 20px;
height: 89px;
margin-top: 3px;
position: absolute;
top: 92px;
left: 115px
}
.top {
background: #ffffff;
width: 89px;
height: 20px;
position: absolute;
left: 23px
}
.middle {
background: #ffffff;
width: 89px;
height: 20px;
position: absolute;
top: 81px;
left: 23px
}
.bottom {
background: #ffffff;
width: 89px;
height: 20px;
position: absolute;
top: 164px;
left: 23px
}
style="position: absolute; left: 0px; top: 100px; text-align: center; width: 100%; font-size: 40px; background: #aaffaa; font-family: '微软雅黑'">
DIV模拟的LED时钟
</div>
<div style="position: absolute; left: 100px; top: 200px;" id="h1">
<div class="left-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="left-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="top">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="middle">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="bottom">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
</div>
<!-- 时钟LED -->
<div style="position: absolute; left: 250px; top: 200px;" id="h2">
<div class="left-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="left-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="top">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="middle">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="bottom">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
</div>
<!-- 分钟LED -->
<div style="position: absolute; left: 450px; top: 200px;" id="m1">
<div class="left-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="left-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="top">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="middle">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="bottom">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
</div>
<!-- 分钟LED -->
<div style="position: absolute; left: 600px; top: 200px;" id="m2">
<div class="left-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="left-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="top">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="middle">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="bottom">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
</div>
<!-- 秒钟LED -->
<div style="position: absolute; left: 800px; top: 200px;" id="s1">
<div class="left-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="left-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="top">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="middle">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="bottom">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
</div>
<!-- 秒钟LED -->
<div style="position: absolute; left: 950px; top: 200px;" id="s2">
<div class="left-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="left-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="top">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="middle">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="bottom">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
</div>
</body>
<script>
function lighten1(ledId, ledPartClassName, color) {
var led = document.getElementById(ledId);
var ledParts = led.childNodes;
var ledPart;
for ( var i = 0; i < ledParts.length; i++) {
if (ledParts[i].className == ledPartClassName) {
ledPart = ledParts[i];
break;
}
}
var ledPoints = ledPart.childNodes;
for ( var i = 0; i < ledPoints.length; i++) {
if (ledPoints[i].tagName == "DIV") {
ledPoints[i].style.background = color;
}
}
}
var numTab = new Array();
numTab[0] = "left-top;top;right-top;right-bottom;bottom;left-bottom";
numTab[1] = "right-top;right-bottom";
numTab[2] = "top;right-top;left-bottom;middle;bottom";
numTab[3] = "top;right-top;middle;right-bottom;bottom";
numTab[4] = "left-top;middle;right-top;right-bottom";
numTab[5] = "top;left-top;middle;right-bottom;bottom";
numTab[6] = "top;left-top;middle;left-bottom;right-bottom;bottom";
numTab[7] = "top;right-top;right-bottom";
numTab[8] = "left-top;top;right-top;right-bottom;bottom;left-bottom;middle";
numTab[9] = "top;left-top;right-top;middle;right-bottom;bottom";
function showNum1(ledId, number) {
var clearLocals = numTab[8].split(";");
for ( var j = 0; j < clearLocals.length; j++) {
lighten1(ledId, clearLocals[j], "#ffffff");
}
var locals = numTab[number].split(";");
for ( var j = 0; j < locals.length; j++) {
lighten1(ledId, locals[j], "#ff0000");
}
}
function showTime() {
var date = new Date();
var hour = date.getHours();
var hourStr = hour + "";
if (hour < 10) {
hourStr = "0" + hourStr;
}
showNum1("h1", hourStr.charAt(0) + "");
showNum1("h2", hourStr.charAt(1) + "");
var min = date.getMinutes();
var minStr = min + "";
if (min < 10) {
minStr = "0" + minStr;
}
showNum1("m1", minStr.charAt(0) + "");
showNum1("m2", minStr.charAt(1) + "");
var sec = date.getSeconds();
var secStr = sec + "";
if (sec < 10) {
secStr = "0" + secStr;
}
showNum1("s1", secStr.charAt(0) + "");
showNum1("s2", secStr.charAt(1) + "");
}
setInterval(showTime, 1000);
</script>
</html>
<html>
<head>
<title>MyHtml1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<!-- 样式表 -->
<style>
.div1 {
background: #999999;
width: 20px;
height: 20px;
}
.left-top {
background: #ffffff;
width: 20px;
height: 81px;
position: absolute;
}
.right-top {
background: #ffffff;
width: 20px;
height: 89px;
position: absolute;
left: 115px
}
.left-bottom {
background: #ffffff;
width: 20px;
height: 89px;
margin-top: 3px;
position: absolute;
top: 92px
}
.right-bottom {
background: #ffffff;
width: 20px;
height: 89px;
margin-top: 3px;
position: absolute;
top: 92px;
left: 115px
}
.top {
background: #ffffff;
width: 89px;
height: 20px;
position: absolute;
left: 23px
}
.middle {
background: #ffffff;
width: 89px;
height: 20px;
position: absolute;
top: 81px;
left: 23px
}
.bottom {
background: #ffffff;
width: 89px;
height: 20px;
position: absolute;
top: 164px;
left: 23px
}
</style>
<body>
style="position: absolute; left: 0px; top: 100px; text-align: center; width: 100%; font-size: 40px; background: #aaffaa; font-family: '微软雅黑'">
DIV模拟的LED时钟
</div>
<div style="position: absolute; left: 100px; top: 200px;" id="h1">
<div class="left-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="left-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="top">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="middle">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="bottom">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
</div>
<!-- 时钟LED -->
<div style="position: absolute; left: 250px; top: 200px;" id="h2">
<div class="left-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="left-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="top">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="middle">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="bottom">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
</div>
<!-- 分钟LED -->
<div style="position: absolute; left: 450px; top: 200px;" id="m1">
<div class="left-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="left-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="top">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="middle">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="bottom">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
</div>
<!-- 分钟LED -->
<div style="position: absolute; left: 600px; top: 200px;" id="m2">
<div class="left-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="left-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="top">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="middle">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="bottom">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
</div>
<!-- 秒钟LED -->
<div style="position: absolute; left: 800px; top: 200px;" id="s1">
<div class="left-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="left-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="top">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="middle">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="bottom">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
</div>
<!-- 秒钟LED -->
<div style="position: absolute; left: 950px; top: 200px;" id="s2">
<div class="left-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-top">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="left-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="right-bottom">
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1" style="margin-bottom: 3px"></div>
<div class="div1"></div>
</div>
<div class="top">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="middle">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
<div class="bottom">
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="margin-right: 3px; float: left;"></div>
<div class="div1" style="float: left"></div>
</div>
</div>
</body>
<script>
function lighten1(ledId, ledPartClassName, color) {
var led = document.getElementById(ledId);
var ledParts = led.childNodes;
var ledPart;
for ( var i = 0; i < ledParts.length; i++) {
if (ledParts[i].className == ledPartClassName) {
ledPart = ledParts[i];
break;
}
}
var ledPoints = ledPart.childNodes;
for ( var i = 0; i < ledPoints.length; i++) {
if (ledPoints[i].tagName == "DIV") {
ledPoints[i].style.background = color;
}
}
}
var numTab = new Array();
numTab[0] = "left-top;top;right-top;right-bottom;bottom;left-bottom";
numTab[1] = "right-top;right-bottom";
numTab[2] = "top;right-top;left-bottom;middle;bottom";
numTab[3] = "top;right-top;middle;right-bottom;bottom";
numTab[4] = "left-top;middle;right-top;right-bottom";
numTab[5] = "top;left-top;middle;right-bottom;bottom";
numTab[6] = "top;left-top;middle;left-bottom;right-bottom;bottom";
numTab[7] = "top;right-top;right-bottom";
numTab[8] = "left-top;top;right-top;right-bottom;bottom;left-bottom;middle";
numTab[9] = "top;left-top;right-top;middle;right-bottom;bottom";
function showNum1(ledId, number) {
var clearLocals = numTab[8].split(";");
for ( var j = 0; j < clearLocals.length; j++) {
lighten1(ledId, clearLocals[j], "#ffffff");
}
var locals = numTab[number].split(";");
for ( var j = 0; j < locals.length; j++) {
lighten1(ledId, locals[j], "#ff0000");
}
}
function showTime() {
var date = new Date();
var hour = date.getHours();
var hourStr = hour + "";
if (hour < 10) {
hourStr = "0" + hourStr;
}
showNum1("h1", hourStr.charAt(0) + "");
showNum1("h2", hourStr.charAt(1) + "");
var min = date.getMinutes();
var minStr = min + "";
if (min < 10) {
minStr = "0" + minStr;
}
showNum1("m1", minStr.charAt(0) + "");
showNum1("m2", minStr.charAt(1) + "");
var sec = date.getSeconds();
var secStr = sec + "";
if (sec < 10) {
secStr = "0" + secStr;
}
showNum1("s1", secStr.charAt(0) + "");
showNum1("s2", secStr.charAt(1) + "");
}
setInterval(showTime, 1000);
</script>
</html>