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

前端技术 2023/09/03 JavaScript

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

本文地址：https://www.stayed.cn/item/8879

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案