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动态加载三
Aug 22 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 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中str_pad()函数用法分析
2017/03/28 PHP
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
使用python实现扫描端口示例
2014/03/29 Python
改进Django中的表单的简单方法
2015/07/17 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
AUC计算方法与Python实现代码
2020/02/28 Python
python实现代码审查自动回复消息
2021/02/01 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
如何保障Web服务器安全
2014/05/05 面试题
本科生求职简历的自我评价
2013/10/21 职场文书
小学语文教学反思
2014/02/10 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
2014年企业党建工作总结
2014/12/18 职场文书