jquery制作LED 时钟特效


Posted in Javascript onFebruary 01, 2015

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

Javascript 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
thinkphp 表名 大小写 窍门
Feb 01 #Javascript
javascript实现带节日和农历的日历特效
Feb 01 #Javascript
2种jQuery 实现刮刮卡效果
Feb 01 #Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 #Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 #Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 #Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 #Javascript
You might like
火车头采集器3.0采集图文教程
2007/03/17 PHP
php的正则处理函数总结分析
2008/06/20 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python 操作文件的基本方法总结
2017/08/10 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
django输出html内容的实例
2018/05/27 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python3中exp()函数用法分析
2019/02/19 Python
医学生实习自我鉴定
2013/09/27 职场文书
面试后的英文感谢信
2014/02/01 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
出国留学担保书
2014/05/20 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2014年教研员工作总结
2014/12/23 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript