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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
js 三级关联菜单效果实例
Aug 13 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
Vue.js基础知识小结
Jan 13 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
Python单元测试框架unittest简明使用实例
2015/04/13 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
python语言的优势是什么
2020/06/17 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
日期和时间问题
2015/01/04 面试题
博士毕业生自我鉴定范文
2014/04/13 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
管理工程专业求职信
2014/08/10 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
教师个人考察材料
2014/12/16 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书