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中this指针的新理解分享
Jan 31 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
webpack实用小功能介绍
Jan 02 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
javascript事件模型介绍
2016/05/31 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python 字段拆分详解
2019/12/17 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
公司联欢晚会主持词
2014/03/22 职场文书
合作意向书模板
2014/03/31 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
80后婚前协议书范本
2014/10/24 职场文书
2015年电工工作总结
2015/04/10 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android