jquery模拟LCD 时钟的html文件源代码


Posted in Javascript onJune 16, 2014

以下是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模拟LCD时钟</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模拟LCD时钟</h2><a href="http://keleyi.com/a/bjad/l3u8rpcb.htm" target="_blank">原文</a> 
</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();

Javascript 相关文章推荐
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
Javascript图片上传前的本地预览实例
Jun 16 #Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 #Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 #Javascript
javascript进行数组追加方法小结
Jun 16 #Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 #Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 #Javascript
js限制文本框只能输入数字方法小结
Jun 16 #Javascript
You might like
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php制作文本式留言板
2015/03/18 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
深入理解Python中装饰器的用法
2016/06/28 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
数学教师个人总结
2015/02/06 职场文书
开场白怎么写
2015/06/01 职场文书
运动会加油稿30字
2015/07/21 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
Python 实现定积分与二重定积分的操作
2021/05/26 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL
利用Apache Common将java对象池化的问题
2022/06/16 Servers