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 错误处理的几种方法
Jun 13 Javascript
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
python opencv 直方图反向投影的方法
2018/02/24 Python
Python pandas用法最全整理
2019/08/04 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
python定时任务 sched模块用法实例
2019/11/04 Python
python属于解释型语言么
2020/06/15 Python
如何用python免费看美剧
2020/08/11 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
Android面试题附答案
2014/12/08 面试题
大学生应聘自荐信
2013/10/11 职场文书
店长助理岗位职责
2013/12/13 职场文书
出生医学证明样本
2014/01/17 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
使用Python解决图表与画布的间距问题
2022/04/11 Python