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 面向对象之重载
May 04 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
JavaScript中window和document用法详解
Jul 28 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变量可用字符
2014/05/28 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
Python3实现Web网页图片下载
2016/01/28 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
python学生管理系统的实现
2020/04/05 Python
Python同时迭代多个序列的方法
2020/07/28 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
事业单位辞职信范文
2014/01/19 职场文书
法定代表人授权委托书
2014/04/04 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
小班下学期评语
2014/05/04 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
丧事答谢词大全
2015/09/30 职场文书
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技