DIV模拟LED，js控制显示时间，大家可以复制代码到HTML文件，执行HTML就行了
2013-01-27 12:56
876 查看
<!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>
<body>
<div
style="position: absolute; left: 0px; top: 100px; text-align: center; width: 100%; font-size: 40px; background: #aaffaa; font-family: '微软雅黑'">
DIV模拟的LED时钟
</div>
<!-- 时钟LED -->
<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>
<div
style="position: absolute; left: 0px; top: 100px; text-align: center; width: 100%; font-size: 40px; background: #aaffaa; font-family: '微软雅黑'">
DIV模拟的LED时钟
</div>
<!-- 时钟LED -->
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 在C# WebBrowser控件插入JS代码并执行,可以修改js就能对html执行任意操作
- 意外作出了一个javascript的服务器,可以通过js调用并执行任何java(包括 所有java 内核基本库)及C#类库,并最终由 C# 执行你提交的javascript代码! 不敢藏私,特与大家分
- 小代码 HTML 每个按钮控制一个DIV js实现
- 意外作出了一个javascript的服务器,可以通过js调用并执行任何java(包括 所有java 内核基本库)及C#类库,并最终由 C# 执行你提交的javascript代码! 不敢藏私,特与大家分
- html嵌入js代码显示而不执行的
- HTML显示日期时间代码 - [js 特效代码]
- timer 的使用 模拟显示时间，可以每隔一段时间定时执行调度
- js div asp.net 实现漂浮图片，可以代码控制。
- JS 实现几秒跳转的代码可以显示时间
- fprintf 控制台代码，可以控制光标等，控制台显示时间源码
- 纵向无缝隙滚动显示JS控制代码
- js控制div隐藏显示
- js将html形式的时间转换为可以进行运算的数值
- 通过radio和js控制div里的内容显示或者隐藏
- JS--时间器控制图片显示
- js 控制div 隐藏与显示
- 控制静态资源(html,css,js)的缓存时间的过滤器
- JS显示动态显示当前时间代码
- JS+CSS模拟可以无刷新显示内容的留言板实例
- android中phonegap下js调用java代码 progressbar显示的控制