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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
详解各版本React路由的跳转的方法
May 10 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 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
zf框架的数据库追踪器使用示例
2014/03/13 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
javascript中的new使用
2010/03/20 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
用Python进行行为驱动开发的入门教程
2015/04/23 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
python实现静态web服务器
2019/09/03 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
英语专业毕业生自我鉴定
2013/11/09 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
2014年应急工作总结
2014/12/11 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
Python+DeOldify实现老照片上色功能
2022/06/21 Python