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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
js禁止回车提交表单的示例代码
2013/12/23 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
python操作redis的方法
2015/07/07 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
python实现支付宝转账接口
2019/05/07 Python
python安装本地whl的实例步骤
2019/10/12 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
六个一活动实施方案
2014/03/21 职场文书
食品工程专业求职信
2014/06/15 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
2014年团工作总结
2014/11/27 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
布达拉宫导游词
2015/02/02 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏