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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
JS继承 笔记
Jul 13 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
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+DBM的同学录程序(4)
2006/10/09 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
详解jquery和vue对比
2019/04/16 jQuery
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
初学Python实用技巧两则
2014/08/29 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
什么是python的必选参数
2020/06/21 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书