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

2019-11-20 10:48:14

字体：大中小

来源：转载

供稿：网友

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

上一篇：分享jQuery插件的学习笔记

下一篇：Jquery easyui开启行编辑模式增删改操作