查看效果网址：http://keleyi.com/keleyi/phtml/jqtexiao/24.htm

以下是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();

转载自http://keleyi.com/a/bjad/l3u8rpcb.htm

web前端:http://www.cnblogs.com/jihua/p/webfront.html

jquery模拟LCD 时钟的更多相关文章

  1. jQuery模拟打字逐字输出代码

    效果查看:http://hovertree.com/texiao/jquery/70/ jQuery键盘打出逐字逐句显示特效,逐字逐句显示文字 还可以设置每个文字随机颜色: http://hovert ...

  2. jQuery ClockPicker 圆形时钟

    ClockPicker.js是一款时钟插件,其实还可以改进,里面的分可以改成短横线. 在线实例 实例预览  jQuery ClockPicker 圆形时钟 使用方法 <div class=&qu ...

  3. jquery 模拟 alert 手机，pc，平板 3合一

    $.kw = { title : "System information", //默认标题 可修改 speed : 400, //默认速度 可修改 buttonName : &qu ...

  4. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

  5. 使用JS或jQuery模拟鼠标点击a标签事件代码

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  6. Jquery模拟多选框(checkbox)

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  7. jquery模拟点击A标签的问题

    我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久. 先看下边的代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <htm ...

  8. 用js或JQuery模拟点击a标签的操作

    一.用js模拟点击a标签的操作. jsp代码: <a id="login" href="${pageContext.request.contextPath}/log ...

  9. jquery模拟下拉框

    <!DOCTYPE html> <html lang="en"> <head> <title>jquery模拟SELECT框< ...

随机推荐

  1. 不care小米，梁军坦言微鲸才是乐视最大对手

    除了每天毫无悬念地上头条和陷入困境的生态帝国之外,乐视还要继续操心着它的对手们."挑事儿"的小米已经不足为惧,后起之秀微鲸成了一个令它"头疼"的所在.因为,不仅 ...

  2. CSS移动端多行显示多余省略号

    /*css3 多行显示省略号,也可用于单行*/ .one-line { display: -webkit-box; overflow : hidden; text-overflow: ellipsis ...

  3. 使用easyui-layout布局

    <body class="easyui-layout"> <div data-options="region:'north',title:'顶部',sp ...

  4. win8下IE10的鼠标mouse事件响应错误BUG

    具体症状就是有时候鼠标左键响应,有时候右键才能响应 问题的原因就是事件对象的detail没有复位 https://github.com/clientside/amplesdk/issues/187

  5. Clash Detection

    Clash Detection eryar@163.com Abstract. Clash detection is used for the model collision check. The p ...

  6. JAVA的静态变量、静态方法、静态类

    静态变量和静态方法都属于静态对象,它与非静态对象的差别需要做个说明. (1)Java静态对象和非静态对象有什么区别? 比对如下: 静态对象                                ...

  7. ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分（1）用户注册

    上一次把基本框架搭建起来了,这次开始整Web部分,终于可以看到界面了小激动一下.web项目部分从用户功能开始,基本有注册,登录.注销.查找.查看.删除等涉及Member区域和Manage区域. 目录: ...

  8. MVC4做网站后台:栏目管理2、修改栏目

    接上节添加栏目. 修改栏目与添加栏目非常相似,主要区别在于先向视图传递要修改栏目的model.另外在保存时比添加栏目验证要更多一些. 1.要验证父栏目不能是其本身: 2.父栏目不能是其子栏目: 3.父 ...

  9. ASP.NET Core 中的依赖注入 [共7篇]

    一.控制反转(IoC) ASP.NET Core在启动以及后续针对每个请求的处理过程中的各个环节都需要相应的组件提供相应的服务,为了方便对这些组件进行定制,ASP.NET通过定义接口的方式对它们进行了 ...

  10. EntityFramework之你不知道的那些事（七）

    前言 前面一系列几乎都是循序渐进式的进行叙述,似乎脚步走得太快了,于是我开始歇一歇去追寻一些我所不太了解的细枝末节,在此过程中也屡次碰壁,但是唯有如此才能更好的成长,不是吗!希望此文对你亦有帮助. 属 ...