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 相关文章推荐
JS 数字转换研究总结
Dec 26 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
小程序自定义日历效果
Dec 29 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 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导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python表达式的优先级详解
2020/02/18 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
鱼油专家:Omegavia
2016/10/10 全球购物
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
《美丽的公鸡》教学反思
2014/02/25 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
单位单身证明样本
2014/10/11 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
家属答谢词
2015/01/05 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
python程序的组织结构详解
2021/12/06 Python