本文實例講述了jQuery時間插件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> 希望本文所述對大家jQuery程序設計有所幫助。
