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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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中文乱码
2009/11/26 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
javascript实现简易计算器
2017/02/01 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
python语言使用技巧分享
2016/05/31 Python
python用插值法绘制平滑曲线
2021/02/19 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
图书室标语
2014/06/21 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
初一年级组工作总结
2015/08/12 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书