jquery制作LED 时钟特效
jquery制作led 时钟特效。以下是html文件源代码:
代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>jquery模拟led时钟</title>
<script type="text/javascript" src="https://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://keleyi.com/keleyi/phtml/jqtexiao/24/jquery.keleyilcdclock.css" />
<style type="text/css">
p{margin-bottom:10px}
</style>
</head>
<body>
<p><h2>jquery模拟led时钟</h2></p>
<p id="keleyitime1">2014/4/24 12:38:20</p>
<p id="keleyitime2">2000/1/1 23:59:46</p>
<p id="keleyitime3">1680/12/31 23:59:47</p>
<p id="keleyitime4">2011/3/26 20:18:12</p>
<script type="text/javascript" src="https://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文件。
然后定义p的id,比如keleyitime,接着设置时间与使用keleyilcdclock()方法。
$("#keleyitime").text(date());
$("#keleyitime").keleyilcdclock();
以上就是使用jquery制作led时钟的全部代码了,希望小伙伴们能够喜欢。
上一篇: 解决打印机怪异提示之打印任务无法停止