jQuery实现LED数字效果

来源:https://www.sucaihuo.com/js/2894.html 2017-09-01 22:59浏览(1770) 收藏

一款jQuery实现的LED数字效果,一共有4种样式效果:倒计时、随机显示数字、显示时间格式(hh:mm)、显示时间格式(hh:mm:ss),数字的样式可以自由调整。
jQuery实现LED数字效果
分类:日期时间 > 倒计时 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入jQuery库和必要的JS文件,并设置好页面元素的样式,代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/jquery.uled.js"></script>
<style type="text/css">
body {background:url(images/bg.gif) repeat; margin:0; padding:0;}
.title {background-color:rgba(0,0,0,0.56); text-align:center; width:100%; position:fixed; top:0; left:0; padding:5px 0; z-index:99999;}
.title a {color:#FFF; text-decoration:none; font-size:16px; font-weight:bolder; line-height:24px;}
#wrapper {width:760px; margin:54px auto; background: none repeat scroll 0 0 #FFF; border-radius: 5px 5px 5px 5px; padding:30px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);}
.autosize {font-size:0; background: #000; display: table;}
</style>

页面的body部分,四种不同的演示效果用四个不同的div容器来显示,代码如下:

<div id="wrapper">
  <div>
    <div>
      <p>示例 1:倒计时</p>
      <div id="led0" class="autosize" style="background:#333"></div>
      <p>示例 2:随机显示数字</p>
      <div id="led1" class="autosize" style="background:#333"></div>
      <p>示例 3:显示时间格式(hh:mm)</p>
      <div id="led2" class="autosize"></div>
      <p>示例 4:显示时间格式(hh:mm:ss)</p>
      <div id="led3" class="autosize"></div>
    </div>
  </div>
</div>

页面的底部,实例化四个示例并设置好相关参数,代码如下:

$(document).ready(function() {
	var l0 = new uLED({
		id : "led0",
		type : "countdown",
		format : "ddd:hh:mm:ss",
		color : "#eee",
		bgcolor : "#000",
		size : 5,
		rounded : 1,
		led : "font1"
	});
	var l1 = new uLED({
		id : "led1",
		type : "random",
		length : 7,
		color : "#af0",
		bgcolor : "#101a10",
		size : 10,
		rounded : 6
	});
	var l2 = new uLED({
		id : "led2",
		type : "time",
		format : "hh:mm",
		color : "#f0a",
		bgcolor : "#222",
		size : 22,
		rounded : 4
	});
	var l3 = new uLED({
		id : "led3",
		type : "time",
		format : "hh:mm:ss",
		hourformat : 12,
		color : "#fa0",
		bgcolor : "#222",
		size : 12,
		rounded : 0
	});
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2