jQuery時(shí)間插件jquery.clock.js用法實(shí)例(5個(gè)示例)
本文實(shí)例講述了jQuery時(shí)間插件jquery.clock.js用法。分享給大家供大家參考,具體如下:
Example 1:
Basic clock, no options
<html> <head> <title>jclock</title> <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2.1.min.js"></mce:script> <mce:script type="text/javascript" src="jquery.jclock.js" mce_src="jquery.jclock.js"></mce:script> <mce:script type="text/javascript"><!-- $(function($) { $('.jclock').jclock(); }); // --></mce:script> </head> <body> <div class="jclock"></div> </body> </html>
Example 2:
Clock, non-UTC, with options
<html> <head> <title>jclock</title> <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2.1.min.js"></mce:script> <mce:script type="text/javascript" src="jquery.jclock.js" mce_src="jquery.jclock.js"></mce:script> <mce:script type="text/javascript"><!-- $(function($) { var options = { timeNotation: '12h', am_pm: true, fontFamily: 'Verdana, Times New Roman', fontSize: '20px', foreground: 'yellow', background: 'red' } $('.jclock').jclock(options); }); // --></mce:script> </head> <body> <div class="jclock"></div> </body>
Example 3:
Clock, UTC
<html> <head> <title>jclock <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2.1.min.js"></mce:script> <mce:script type="text/javascript" src="jquery.jclock.js" mce_src="jquery.jclock.js"></mce:script> <mce:script type="text/javascript"><!-- $(function($) { var options = { utc: true } $('.jclock').jclock(options); }); // --></mce:script> </title></head> <body> <div class="jclock"></div> </body> </html>
Example 4:
Multiple clocks using different time zone offsets
<html> <head> <title>jclock</title> <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2.1.min.js"></mce:script> <mce:script type="text/javascript" src="jquery.jclock.js" mce_src="jquery.jclock.js"></mce:script> <mce:script type="text/javascript"><!-- $(function($) { var optionsEST = { utc: true, utc_offset: -5 } $('#jclock1').jclock(optionsEST); var optionsCST = { utc: true, utc_offset: -6 } $('#jclock2').jclock(optionsCST); var optionsIndia = { utc: true, utc_offset: 5.5 } $('#jclock3').jclock(optionsIndia); }); // --></mce:script> </head> <body> <p>EST: <span id="jclock1"></span></p> <p>CST: <span id="jclock2"></span></p> <p>India: <span id="jclock3"></span></p> </body> </html>
Example 5:
Styled clocks (first clock uses jquery.corner.js)
<html> <head> <title>jclock</title> <mce:style type="text/css"><!-- body { font: Verdana,Arial,sans-serif; /* An explicit background color is required for Safari. */ /* Otherwise your corner chunks will come out black! */ background: #f8f0e0; } div.corner, div.nocorner { width: 10em; padding: 20px; margin: 1em; background: #f00; color: #000; text-align: center; font: verdana, arial, sans-serif; } --></mce:style><style type="text/css" mce_bogus="1"> body { font: Verdana,Arial,sans-serif; /* An explicit background color is required for Safari. */ /* Otherwise your corner chunks will come out black! */ background: #f8f0e0; } div.corner, div.nocorner { width: 10em; padding: 20px; margin: 1em; background: #f00; color: #000; text-align: center; font: verdana, arial, sans-serif; } </style> <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2.1.min.js"></mce:script> <mce:script type="text/javascript" src="jquery.jclock.js" mce_src="jquery.jclock.js"></mce:script> <mce:script type="text/javascript" src="jquery.corner.js" mce_src="jquery.corner.js"></mce:script> <mce:script type="text/javascript"><!-- $(function($) { var options = { timeNotation: '12h', am_pm: true, fontFamily: 'Verdana, Times New Roman', fontSize: '20px', foreground: 'yellow', background: 'red' } $('.jclock').jclock(options); $('.corner').corner("30px"); }); // --></mce:script> </head> <body> <p><div class="corner"><div class="jclock"></div></div></p> <p><div class="nocorner"><div class="jclock"></div></div></p> </body> </html>
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- js(jQuery)獲取時(shí)間的方法及常用時(shí)間類(lèi)搜集
- TimergliderJS 一個(gè)基于jQuery的時(shí)間軸插件
- JS、jquery實(shí)現(xiàn)幾分鐘前、幾小時(shí)前、幾天前等時(shí)間差顯示效果的代碼實(shí)例分享
- 獲取客戶(hù)端電腦日期時(shí)間js代碼(jquery)
- jquery js 獲取時(shí)間差、時(shí)間格式具體代碼
- jQuery的時(shí)間datetime控件在AngularJs中的使用實(shí)例(分享)
- javascript+jQuery實(shí)現(xiàn)360開(kāi)機(jī)時(shí)間顯示效果
- JS/jQuery實(shí)現(xiàn)獲取時(shí)間的方法及常用類(lèi)完整示例
相關(guān)文章
使用jquery庫(kù)實(shí)現(xiàn)電梯導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了使用jquery庫(kù)實(shí)現(xiàn)電梯導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02jquery中的$(document).ready()與window.onload的區(qū)別
瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構(gòu)建完DOM樹(shù)之后, 也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后.2009-11-11jQuery打印指定區(qū)域Html頁(yè)面并自動(dòng)分頁(yè)
項(xiàng)目中需要用到打印HTML頁(yè)面,需要指定區(qū)域打印,使用jquery.PrintArea.js 插件實(shí)現(xiàn)分頁(yè),需要的朋友可以參考下2014-07-07讓你的CSS像Jquery一樣做篩選的實(shí)現(xiàn)方法
用Jquery去操作HTML元素很方便,能夠靈活自如的去查找。其實(shí)CSS也可以靈活方便的去查找篩選,以下用到的一些,整理了一下,還有很多有趣的用法,后續(xù)會(huì)繼續(xù)添加。2011-07-07淺析Js(Jquery)中,字符串與JSON格式互相轉(zhuǎn)換的示例(直接運(yùn)行實(shí)例)
這幾天,遇到了json格式在JS和Jquey的環(huán)境中,需要相互轉(zhuǎn)換,在網(wǎng)上查了一下,大多為缺胳膊少腿,也許咱是菜鳥(niǎo)吧,終于測(cè)試成功后,還是給初學(xué)者們一個(gè)實(shí)例吧2013-07-07jQuery實(shí)現(xiàn)上下滾動(dòng)公告欄詳細(xì)代碼
之前做項(xiàng)目的時(shí)候,一直都想著做一個(gè)上下滾動(dòng)的公告欄,作為展示網(wǎng)站的最新公告信息,給用戶(hù)帶來(lái)極好的用戶(hù)體驗(yàn),下面小編通過(guò)實(shí)例代碼給大家分享基于jQuery實(shí)現(xiàn)上下滾動(dòng)公告欄,感興趣的朋友一起看看吧2018-11-11