jquery模擬LCD 時鐘的html文件源代碼
更新時間：2014年06月16日 15:25:05 投稿：whsnow
LCD想必大家都有見到過吧，本文為大家介紹的就是使用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" />
<style type="text/css">
div{margin-bottom:10px}
</style>
</head>
<body>
<div><h2>jQuery模擬LCD時鐘</h2><a 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();
復制代碼 代碼如下:
<!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" />
<style type="text/css">
div{margin-bottom:10px}
</style>
</head>
<body>
<div><h2>jQuery模擬LCD時鐘</h2><a 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();
相關文章
jQuery判斷iframe中元素是否存在的方法，需要的朋友可以參考一下2013-05-05
這篇文章主要介紹了jQuery中replaceAll()方法用法,實例分析了replaceAll()方法的功能、定義及匹配元素去替換指定內(nèi)容的方法,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了基于JQuery實現(xiàn)分隔條的功能的相關資料，使用JQuery技術實現(xiàn)分隔條的功能，感興趣的小伙伴們可以參考一下2016-06-06
元素選擇是一切操作的前提，jQuery中$()函數(shù)最強大最常用的功能之一就是使用選擇器選擇DOM元素。這里就匯總一些十分常用的jQuery選擇器。2017-02-02
jQuery 定時局部刷新(setInterval),這里是顯示時間的效果代碼。2010-11-11
本文介紹下，用jquery實現(xiàn)的滑動效果，以及對鍵盤按鍵進行監(jiān)聽的例子，有需要的朋友，可以參考學習下2014-05-05
這篇文章主要介紹了jQuery中insertBefore()方法用法,實例分析了insertBefore()方法的功能、定義及把匹配的元素插入到另一個指定的元素集合前面的使用技巧,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄猨query獲取復選框的值的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
給指定id或class的元素綁定（bind）事件時，對于改變或新加的元素，事件不會起作用，這時我們就要用live函數(shù)，它可以讓子元素繼承父元素的事件。2010-12-12
這篇文章主要介紹了JQuery中使文本框獲得焦點的方法,實例分析了jQuery針對文本框獲得焦點的技巧,需要的朋友可以參考下2015-02-02