jquery制作LED 时钟特效

程序员文章站 2022-06-13 19:26:24

jquery制作led 时钟特效。以下是html文件源代码：代码如下:

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时钟的全部代码了，希望小伙伴们能够喜欢。

上一篇： jQuery实现单击和鼠标感应事件

下一篇： jQuery及JS实现循环中暂停的方法教程

jquery制作LED 时钟特效