一款JS模拟的LED数字电子时钟代码,几乎跟LED数字时钟一样的效果,除了变动的时间外,还显示当前的年月日和星期,放在页面的首页也时挺好的,喜欢的童鞋请收下吧。
页面的head部分,需要引入一个CSS文件和一个JS文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/main.js"></script>
页面的body部分,由于每个数字都时分段的LED图片,所以需要多个ul标签里放入多个li元素,代码如下:
<div class="wrap">
<div class="clock">
<ul>
<li>
<ul id="time1">
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
</ul>
</li>
<li>
<ul id="time2">
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
</ul>
</li>
<li class="point"><span></span><span></span></li>
<li>
<ul id="time3">
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
</ul>
</li>
<li>
<ul id="time4">
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
</ul>
</li>
<li class="point"><span></span><span></span></li>
<li>
<ul id="time5">
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
</ul>
</li>
<li>
<ul id="time6">
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
<li><img src="images/front.png" width="100%" height="100%"></li>
</ul>
</li>
</ul>
</div>
<div class="date" id="date">
<span>2016年12月12日</span>
<span>星期一</span>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791