手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery制作LED 时钟特效
jquery制作LED 时钟特效
摘要:以下是HTML文件源代码:复制代码代码如下:jQuery模拟LED时钟div{margin-bottom:10px}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时钟的全部代码了,希望小伙伴们能够喜欢。

【jquery制作LED 时钟特效】相关文章:

jQuery插件制作之参数用法实例分析

jquery实现用户打分评分特效

jQuery子窗体取得父窗体元素的方法

jQuery实现自动滚动到页面顶端的方法

纯javascript制作日历控件

JQuery控制Radio选中方法分析

用javascript制作放大镜放大图片

制作特殊字的脚本

jquery使用经验小结

jquery任意位置浮动固定层插件用法实例

精品推荐
分类导航