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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
electron 安装,调试,打包的具体使用
Nov 06 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/12/29 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
python根据距离和时长计算配速示例
2014/02/16 Python
详解Python循环作用域与闭包
2019/03/21 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
计算机网络专业推荐信
2013/11/24 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
企业挂职心得体会
2014/09/10 职场文书
红歌会主持词
2015/07/02 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
nginx配置限速限流基于内置模块
2022/05/02 Servers