脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery制作LED 时钟特效

jquery制作LED 时钟特效

 更新时间：2015年02月01日 15:46:09   投稿：hebedich  
这篇文章主要介绍了jquery制作LED 时钟特效,效果非常不错，需要的朋友可以参考下

以下是HTML文件源代码：

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery模拟LED时钟</title>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
<link rel="Stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jqtexiao/24/jquery.KeleyiLCDClock.css" />
<style type="text/css">
div{margin-bottom:10px}
</style>
</head>
<body>
<div><h2>jQuery模拟LED时钟</h2></div>
<div id="keleyitime1">2014/4/24 12:38:20</div>
<div id="keleyitime2">2000/1/1 23:59:46</div>
<div id="keleyitime3">1680/12/31 23:59:47</div>
<div id="keleyitime4">2011/3/26 20:18:12</div>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/24/jquery.KeleyiLCDClock.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ke"+"leyitime4").text(Date());
$("#kele"+"yitime1").KeleyiLCDClock();
$("#keley"+"itime2").KeleyiLCDClock();
$("#kel"+"eyitime3").KeleyiLCDClock();
$("#k"+"eleyitime4").KeleyiLCDClock();
});
</script>
</body>
</html>

使用：

引用jquery.KeleyiLCDClock.css文件和jquery.KeleyiLCDClock.js文件。
然后定义div的id，比如keleyitime，接着设置时间与使用KeleyiLCDClock()方法。
$("#keleyitime").text(Date());
$("#keleyitime").KeleyiLCDClock();

以上就是使用jQuery制作LED时钟的全部代码了，希望小伙伴们能够喜欢。

您可能感兴趣的文章:

相关文章

  • 鼠标移到导航当前位置的LI变色处于选中状态

    鼠标移到导航当前位置的LI变色处于选中状态

    本文所要实现的效果广泛应用于当前导航,主要表现为鼠标移到导航上面当前的LI变色，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-08-08
  • jQuery+CSS3实现3D立方体旋转效果

    jQuery+CSS3实现3D立方体旋转效果

    这篇文章主要介绍了jQuery结合CSS3来制作3D立方体旋转效果，切换图片时呈现3D立体图片画廊特效，需要的朋友可以参考下
    2015-11-11
  • jquery隔行换色效果实现方法

    jquery隔行换色效果实现方法

    这篇文章主要介绍了jquery隔行换色效果实现方法,涉及even及odd选择器的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 基于Jquery Ajax type的4种类型(详解)

    基于Jquery Ajax type的4种类型(详解)

    下面小编就为大家带来一篇基于Jquery Ajax type的4种类型(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 跨帧结构无限级菜单

    跨帧结构无限级菜单

    原来ie对默认对弹出窗口有会限制他的大小和位置 所以这就是为什么本地和博客园上看到会不一样的原因了
    2010-09-09
  • jquery用get实现ajax在ie里面刷新不进入后台解决方法

    jquery用get实现ajax在ie里面刷新不进入后台解决方法

    jquery用get实现ajax在ie里面刷新不进入后台的情况想必大家都有遇到过吧，下面与大家分享下具体的解决方法，希望对大家解决问题有所帮助
    2013-08-08
  • jQuery的position()方法详解

    jQuery的position()方法详解

    position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。
    2015-07-07
  • PHP+mysql+Highcharts生成饼状图

    PHP+mysql+Highcharts生成饼状图

    本文将结合实际,使用PHP读取Mysql数据表中的数据,并将获取的数据按照要求输出给前端JS,再通过配置调用Highcharts图表库生成饼状图。
    2015-05-05
  • jQuery操作iframe中js函数的方法小结

    jQuery操作iframe中js函数的方法小结

    这篇文章主要介绍了jQuery操作iframe中js函数的方法,结合实例形式总结分析了jQuery操作iframe中的元素、函数常用方法与注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • jQuery+css实现图片滚动效果(附源码)

    jQuery+css实现图片滚动效果(附源码)

    图片滚动效果想必大家都已司空见惯了吧，接下来本文介绍下jQuery+CSS实现图片滚动，感兴趣的你可不要错过了哈，希望可以帮助到你
    2013-03-03

最新评论