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 相关文章推荐
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
JS排序之选择排序详解
Apr 08 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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程序
2006/10/09 PHP
实用函数4
2007/11/08 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php导出excel格式数据问题
2014/03/11 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
flexigrid 参数说明
2010/11/23 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
python贪吃蛇游戏代码
2020/04/18 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
七一建党节演讲稿
2014/09/11 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
2014年党支部工作总结
2014/11/13 职场文书
交通安全教育主题班会
2015/08/12 职场文书
高二数学教学反思
2016/02/18 职场文书