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 FormatNumber函数实现方法
Dec 30 Javascript
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python内置函数之filter map reduce介绍
2014/11/30 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
CSS3 边框效果
2019/11/04 HTML / CSS
大学生的应聘自我评价
2013/12/13 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
绿色环保演讲稿
2014/05/10 职场文书
室内设计专业自荐信
2014/05/31 职场文书
买房协议书范本
2014/10/23 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
计算机专业自荐信
2015/03/05 职场文书
Python绘制分类图的方法
2021/04/20 Python
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang