一款jQuery实现的LED数字效果,一共有4种样式效果:倒计时、随机显示数字、显示时间格式(hh:mm)、显示时间格式(hh:mm:ss),数字的样式可以自由调整。
页面的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
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791