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 相关文章推荐
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
javascript字符串函数汇总
Dec 06 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 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
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
PHP实现货币换算的方法
2014/11/29 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
joomla数据库操作示例代码
2016/01/06 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
python中的lambda表达式用法详解
2016/06/22 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
python urllib和urllib3知识点总结
2021/02/08 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
女子职高个人自荐书
2014/02/01 职场文书
大学自我评价
2014/02/12 职场文书
经济担保书范文
2014/04/02 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python