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 相关文章推荐
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
JavaScript实现拖拽效果
Mar 16 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 分页函数multi() discuz
2009/06/21 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Django中的文件的上传的几种方式
2018/07/23 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
Django框架反向解析操作详解
2019/11/28 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
浅析Python __name__ 是什么
2020/07/07 Python
如何用Python绘制3D柱形图
2020/09/16 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
员工培训邀请函
2014/01/11 职场文书
顶碗少年教学反思
2014/02/21 职场文书
医药营销个人求职信
2014/04/12 职场文书
企业晚会策划方案
2014/05/29 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
Python预测分词的实现
2021/06/18 Python
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
Android实现图片九宫格
2022/06/28 Java/Android