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 相关文章推荐
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
Vue分页组件实例代码
Apr 17 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
vue项目前端埋点的实现
Mar 06 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代码
2013/12/03 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
vue实现信息管理系统
2020/05/30 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
Python中time模块和datetime模块的用法示例
2016/02/28 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python中def是做什么的
2020/06/10 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
python pip如何手动安装二进制包
2020/09/30 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
王老吉广告词
2014/03/20 职场文书
全运会口号
2014/06/20 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
教师工作表现自我评价
2015/03/05 职场文书