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 中 null、NaN和undefined的区别总结
Apr 10 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
纯javascript制作日历控件
Jul 17 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
原生js实现购物车功能
Sep 23 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
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
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
python 切片和range()用法说明
2013/03/24 Python
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Python 中的with关键字使用详解
2016/09/11 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
python实现数字炸弹游戏
2020/07/17 Python
法律专业应届生自荐信范文
2014/01/06 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
保险公司早会主持词
2014/03/22 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
幸福终点站观后感
2015/06/04 职场文书
安全第一课观后感
2015/06/18 职场文书
学校少先队工作总结
2015/08/12 职场文书
JS的深浅复制详细
2021/10/16 Javascript
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
Python加密技术之RSA加密解密的实现
2022/04/08 Python
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL
CSS的calc函数用法小结
2022/06/25 HTML / CSS