实现LED数字效果的jQuery插件 – jQuery uLED plugin

分类栏目：用户体验 - 前端开发

版权信息： 原创作品、版权所有，禁止匿名转载，分享请注明版权。

23015

发布于 8 条评论

在我们的项目中，经常需要用到一些特效，但往往有时候在开发过程中却没有那么的理想，要么是时间上的问题要么就是质量上不能保证，这时候如果我们有个相对应的高效率的 jQuery 插件， 那真是太幸福了。嘿嘿……(javascript高手除外，有句伟大的名言是这样子说的：自己动手，丰衣足食！自己根据项目写的程序才是最好的)。今天就为大家分享一款使用 LED 效果来显示倒计时或者时间的 jQuery 插件 – jQuery uLED plugin，这款插件LED效果相当的不错，而且使用非常简单。
这个插件有几个特色：
1、可以自定义数字的大小，并且可以通过设置数字图像的半径，可以显示圆形或者方形的数字
2、可以自定义数字的颜色和数字的背景颜色，可以更好的融合到你的网页中，DIY扩展性很不错
3、可以显示随机数字、倒计时、时钟，可以自定义数字的组成格式

LED-time

下面我们就一起来看看这个插件的用法以及测试下这个插件的实用性，看看是否可以提高我们web开发的效率和质量。

查看预览下载附件

首先，需要引入括jQuery和Raphael库，因为uLED是基于在他们的基础上开发的，可以从他们的网站上下载下来，或者直接引用谷歌提供的CDN链接：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js"></script>

然后，再引入uLED的javascript文件到你的网站上，具体代码如下：

<script type="text/javascript" src="js/jquery.uled.js"></script>

接下来，在body部分创建一个div，设置一个指定的id，让uLED知道该在什么地方开始工作。

<div id="led"></div>

最后，根据你想要的效果为你指定的id自定义参数：

<script type="text/javascript">
$(document).ready(function(){
   var l0 = new uLED({
      id : "led",
      type : "countdown",
      format : "ddd:hh:mm:ss",
      color : "#eee",
      bgcolor : "#000",
      size : 5,
      rounded : 1,
      led : "font1"
   }); });
</script>

参数说明：

  • id – 指明uLED作用的地方
  • type – LED显示屏的类型，有三种类型countdown – 倒计时、random – 随机、 time – 时间
  • format – 定义时间格式(例如”hh:mm”)
  • color – 定义数字的颜色值(十六进制颜色值)
  • bgcolor – 定义LED的背景颜色值(十六进制颜色值)
  • size– 定义LED数字的大小，不用带单位，直接输入数字即可，在这里要特别的说明一下，在jquery.uled.js文件中对这个size做了一个限制： 
    if (conf.size < 30) {
        h_w = conf.size;
    }

    所以，当我们定义这个尺寸的时候，大于30 的话，会失效，解决方法可以修改jquery.uled.js文件的这个值(30)，改成你所希望的值即可。

  • rounded – 定义LED数字的的半径，不用带单位，直接输入数字即可
  • led – 定义LED类型(可选,不是必须参数),有三个选择可以选择,分别是“font1” 、“font2”、 “font3”

查看预览下载附件

以上就是这个插件的用法以及示例，是不是很简单呢，希望可以帮到大家，如果你有好的建议，可以在下面评论区域留言，我们一起学习探讨。

相关推荐

全部评论 / 8

  1. coolbean

    可是现在都在后台软件在发布文章，这怎么做到？

    coolbean 2012-10-29
    20

  2. 效果真眩！！

    钩引网 2012-10-29
    19

  3. jquery.uled.js中对字体颜色也做了限制，不同颜色对应不同字体，修改body中的代码并不能完成颜色和字体的更改。

    iout.in 2012-10-29
    18
    1. Javin

      字体的颜色可以通过下面的参数修改（如：color : “#eee”），这里的字体其实是很多个小正方形组成的，是一种图形，小正方形可以设置圆角半径（如：rounded : 1），更加圆角半径的多样化就可以设置出多样化的“字体”出来。
      <script type="text/javascript">
      $(document).ready(function(){
      var l0 = new uLED({
      id : "led",
      type : "countdown",
      format : "ddd:hh:mm:ss",
      color : "#eee",
      bgcolor : "#000",
      size : 5,
      rounded : 1,
      led : "font1"
      }); });
      </script>

      1号 Javin 2012-10-29

      1. 我尝试过了，修改body里面的代码不行的，单纯更改color的颜色和jquery.uled.js里面的有限制。
        if (conf.color == "#aaa") {
        color = conf.color;
        led = font1;
        format = "ddd:hh:mm:ss";
        }

        iout.in 2012-10-29
        1. Javin

          嗯，刚刚测试了下， 是有这个问题，想要自己自定义颜色的时候，可能还要修改下jquery.uled.js文件，这个插件还是不能够完全的在html中自定义的更改。但是修改起来也不难，按照原有的示例参数设置即可，或者直接修改示例中的颜色参数。

          1号 Javin 2012-10-29

  4. 看着这么多代码就头痛。最主要的是因为不懂。

    一念花开 2012-10-29
    17
    1. Javin

      呵呵，万事开头难，耐心看下去，其实也就那么一回事

      1号 Javin 2012-10-29