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 select标签操作代码段
May 16 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
phpStorm2020 注册码
2020/09/17 PHP
js树形控件脚本代码
2008/07/24 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
用django设置session过期时间的方法解析
2019/08/05 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
python 制作简单的音乐播放器
2020/11/25 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书