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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
Vue实现6位数密码效果
Aug 18 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
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快速生成各种信息提示框的方法
2016/02/03 PHP
php实现简单爬虫的开发
2016/03/28 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
经济系大学生求职信
2013/10/01 职场文书
应用数学专业求职信
2014/03/14 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
小学远程教育工作总结
2015/08/13 职场文书
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server