当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery制作LED 时钟特效

jquery制作LED 时钟特效

2019年03月31日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网