jquery模拟LCD 时钟的html文件源代码

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