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 常用方法总结
Jun 03 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
js+css实现select的美化效果
Mar 24 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
测试php函数的方法
2013/11/13 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python实现简单井字棋小游戏
2020/03/05 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
新领导上任欢迎词
2014/01/13 职场文书
工程质量月活动方案
2014/02/19 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
2014年统计工作总结
2014/11/21 职场文书
导游词之天津盘山
2019/11/01 职场文书