html实现led数字效果,jQuery实现LED数字效果

一款jQuery实现的LED数字效果，一共有4种样式效果：倒计时、随机显示数字、显示时间格式(hh:mm)、显示时间格式(hh:mm:ss)，数字的样式可以自由调整。

查看演示

下载资源：

12

次 下载资源

下载积分：

20

积分

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

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;}

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

示例 1：倒计时

示例 2：随机显示数字

示例 3：显示时间格式(hh:mm)

示例 4：显示时间格式(hh:mm:ss)

页面的底部，实例化四个示例并设置好相关参数，代码如下： $(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

});

});