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 相关文章推荐
JavaScript 继承详解(二)
Jul 13 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
jQuery链使用指南
Jan 20 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
jQuery限制图片大小的方法
May 25 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 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
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
jquery 面包屑导航 具体实现
2013/06/05 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
python删除列表中重复记录的方法
2015/04/28 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python3 集合set入门基础
2020/02/10 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
博士生求职信
2014/07/06 职场文书
小学生运动会报道稿
2014/09/12 职场文书
工作收入证明模板
2014/10/10 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python