DIV模拟LED，js控制显示时间，大家可以复制代码到HTML文件，执行HTML就行了

最新推荐文章于 2022-10-11 20:46:51 发布
最新推荐文章于 2022-10-11 20:46:51 发布
阅读量829 收藏
点赞数
文章标签： 模拟LED javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/louzhu_sb/article/details/8546156
版权
<!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>
louzhu_SB
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
酷炫LED数字时钟js代码
06-11
这是一款简单的支持获取本地时间的LED数字时钟动画特效，红色酷炫LED数字时钟js代码。
使用jQuery加载html页面到指定的div实现方法
11-22
一、jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里。 比如：加载a.html里面的<div id=“row”></div>这个div里面的所有内容加载到b.html的这个div里<div id=”content...
Js电子显示屏特效-模拟LED显示屏文字滚动代码
书写人生
04-12 3230
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>LED显示屏文字滚动</title> <style type="text/css"> #pmp { font-family: "微软雅黑"; font-size: 40px; color: #FF0000; t...
html前端实现led样式数字的效果（数码管效果展示数据）
dj_xyp的博客
01-16 7052
前端实现led样式数字的效果前言效果图实现代码使用方式html代码该工具类使用面向对象的思想来实现该功能；而我认为每一个数字是应该对象，即“123”是应该对象，“2323”也是一个对象，“-23.3234”也是一个对象；示例 前言 由于最近有个需求是将数字展示位led样式，网上找了很多，很多都是时间倒计时，不能满足需求，而且文档很不齐全，使用方式也不明确。故自己写了此工具类（ps：一年多后端开发程...
html制作led,一种简易LED屏的制作方法
weixin_31572189的博客
06-15 529
本实用新型涉及LED屏技术领域，具体为一种简易LED屏。背景技术：LED屏是一种用发光二极管按顺序排列而制成的新型成像电子设备，由于其亮度高、可视角度广、寿命长等特点，正被广泛应用于户外广告屏等产品中，采用LED光源进行照明，首先取代耗电的白炽灯，然后逐步向整个照明市场进军，将会节约大量的电能，近期，白色LED已达到单颗用电超过1瓦，光输出25流明，也增大了它的实用性，简易LED屏使用前需要对其进...
html实现led数字效果,jQuery实现LED数字效果
weixin_29796905的博客
06-04 569
一款jQuery实现的LED数字效果，一共有4种样式效果：倒计时、随机显示数字、显示时间格式(hh:mm)、显示时间格式(hh:mm:ss)，数字的样式可以自由调整。查看演示下载资源：12次 下载资源下载积分：20积分页面的head部分，需引入jQuery库和必要的JS文件，并设置好页面元素的样式，代码如下： body {backgrou...
让多个div在同一行显示的样式及html代码
12-03
复制代码代码如下: div{ margin-bottom: 10px; clear:both; word-break:break-all; word-wrap:break-word; } 复制代码代码如下: ”code” class=”css”><!–width指定每个div占据的宽度–></pre>.custom_div{...
javascript 控制 html元素 显示/隐藏实现代码
10-29
javascript 控制 html元素 显示/隐藏，下面是一些逐步的实现原理。
html div 透明样式示例代码
01-21
复制代码代码如下: style=”filter:alpha(opacity=100,finishopacity=0,style=2)” 参数解析： alpha是来设置透明度的,它的基本属性是filter：alpha（opacity，finishopacity，style，startX，startY，finishX，...
html 模拟遥控器,Js模拟实现网页遥控器
weixin_33615688的博客
06-10 1642
网页遥控器我想要个遥控器的功能，例如按完3，三秒后自动发送一个3到右边的层。按完48后，3秒种在在右边就显示个48。如果按确定，直接在右边显示。window.onload = function(){var func;var t = 3;var $val = document.getElementById("val");var $show = document.getElementById("sho...
采用DIV实现时钟
05-25
1 采用DIV实现时钟 2 在页面中可以套用 3 学会了以后，可以粘贴复制 4 简单方便
CSS3+HTML5实现漂亮LED数字时钟
06-14
CSS3+HTML5实现漂亮LED数字时钟
一个简单的LED矩阵模拟器使用HTML5画布Typescript实现
08-10
一个简单的LED矩阵模拟器使用HTML5画布 Typescript 实现
LED电子钟（html5 CSS3 jquery）联合打造.rar
07-10
精美的一款LED电子钟，由html5 CSS3 jquery联合打造，模拟的电子屏钟表，显示星期几和上午下午，秒数字会和系统时间保持一致不断走动，如截图所示，很漂亮。
html5 LED计时器_LED倒计时器样式特效
11-10
html5 LED计时器_LED倒计时器样式特效 html5 LED计时器_LED倒计时器样式特效 html5 LED计时器_LED倒计时器样式特效
HTML5、CSS3 制作模拟时钟
ZPan的博客
04-18 2044
HTML5、CSS3 、jQuery制作模拟时钟
【7】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 用户行为
YYDataV的博客
08-09 6562
近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是【用户行为数据可视化大屏】。 话不多说，开始分享干货，欢迎讨论！微信号：6550523 效果展示 1、动态效果图 2、实时分片数据图 3、丰富的主题样式 为了满足不同用户的审美需求，本案例实现了多个主题样式： chalk macarons roma westeros walden 一、确定需求方案 1、确...
CSS+JavaScript制作文字的LED跑马灯效果
yy1342的博客
10-11 801
CSS+JavaScript制作文字的LED跑马灯效果
html页面适应led宽,HTML5 LED（发光二极管）面板
weixin_32484541的博客
06-03 166
JavaScript语言：JaveScriptBabelCoffeeScript确定$(function() {var $pixelGrid = $('#pixel-grid');var pixelGrid = {canvas: null,c2d: null,canvasW: 800,canvasH: 400,bgColor: 'black',pixelColor: '#006cff',numPi...
如何将一个html文件显示到div里
最新发布
05-18
您可以使用JavaScript中的`innerHTML`属性将HTML文件的内容显示在一个`<div>`元素中。 以下是一个示例代码： ```html <!DOCTYPE html> <html> 将HTML文件显示到<div>中 将HTML文件显示到<div>中 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值