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 相关文章推荐
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
jQuery知识点整理
Jan 30 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
koa源码中promise的解读
Nov 13 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
PHP 动态随机生成验证码类代码
2010/04/09 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
Python SQLite3数据库操作类分享
2014/06/10 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
公司委托书格式范文
2014/04/04 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
跳高加油稿
2015/07/21 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书