查看效果网址：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. Ajax_05之跨域请求

    1.跨域请求: Cross Domain Request:跨域名的HTTP请求,浏览器从某个域名下的资源访问了另一域名下的另一资源(协议.域名或是端口号不同): ①浏览器允许跨域请求的情形:  < ...

  2. MVC4做网站后台:用户管理 ——用户组 2、查看、修改、删除用户组

    查看用户组资料和修改用户组资料结合在一起,在用户组列表双击查看用户组资料,修改资料点保存可以保存用户组,点删除可以删除用户组. 先在UserGroupController中添加 action publ ...

  3. 深入学习jQuery选择器系列第七篇——表单选择器

    × 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...

  4. Javascript与ECMAScript

    我们经常习惯性认为Javascript就是ECMAScript,但其实不是这样的. ECMAScript是一种脚本在语法和语义上的标准. 主要包括:语法.类型.语句.关键字.保留字.操作符.对象. 它 ...

  5. javascript之一切皆为对象3

    在前面两个章节“Javascript之一切皆为对象1”和“Javascript之一切皆为对象2”中,曾提到: 1.“一切(引用类型)皆为对象” 2. “每个函数都有一个prototype” 3. “每 ...

  6. c#　枚举

    命名空间:   System程序集:  mscorlib(mscorlib.dll 中) 定义一个枚举类型 public enum Week { [Description("星期一" ...

  7. CSS3中惊艳的gradient

    以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...

  8. HTTP在.NET中的一些应用和解析

    谈到HTTP协议(超文本传输协议),HTTP协议是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接的机制,绝大多数的Web开发,都是构建在 ...

  9. Kooboo CMS 无聊随笔 （1）

    因为公司的框架不开源,但是自己一直都有研究框架的兴趣,所以拿了一个开源的框架过来,而这个开源的框架就是Kooboo CMS.首先我无法用言语来形容我对这个CMS的赞美之词了,总之大家知道一点,这个CM ...

  10. Handler类、异步线程和Message类的参数传递

    声明HandlerThread对象,实现了使用Looper来处理消息队列的功能 //这个类由Android操作系统提供 HandlerThread handlerThread = new Handle ...