jQuery时间插件jquery.clock.js用法实例（5个示例）

本文实例讲述了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程序设计有所帮助。