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脚本语言在网页中的简单应用
May 13 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
jquery if条件语句的写法
May 19 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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 __autoload()方法真的影响性能吗?
2012/03/30 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
php实现生成验证码实例分享
2016/04/10 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
python爬虫的工作原理
2017/03/05 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
transform python环境快速配置方法
2018/09/27 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
pip安装python库的方法总结
2019/08/02 Python
python__new__内置静态方法使用解析
2020/01/07 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
介绍一下.net和Java的特点和区别
2012/09/26 面试题
物流专业大学生求职信范文
2013/10/28 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
关于责任的演讲稿
2014/05/20 职场文书
校庆标语集锦
2014/06/25 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
廉政教育的心得体会
2014/09/01 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
单方投资意向书
2015/05/11 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL