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

更新时间：2016年01月14日 10:46:45 作者：乘着风在飞

这篇文章主要介绍了jQuery时间插件jquery.clock.js用法,结合5个实例简单分析了jQuery时间插件jquery.clock.js的具体使用技巧,需要的朋友可以参考下

本文实例讲述了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库实现电梯导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
jQuery插件autocomplete使用详解
这篇文章主要为大家详细介绍了jQuery插件autocomplete使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
jQuery中$.ajax()方法的具体使用
本文主要介绍了jQuery中$.ajax()方法的具体使用，$.ajax(url,[settings])通过 HTTP 请求加载远程数据，文中通过示例代码详细的介绍了$.ajax()的用法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
jquery中的$(document).ready()与window.onload的区别
浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后.
2009-11-11
jQuery打印指定区域Html页面并自动分页
项目中需要用到打印HTML页面，需要指定区域打印，使用jquery.PrintArea.js 插件实现分页,需要的朋友可以参考下
2014-07-07
jQuery弹出(alert)select选择的值
利用jQuery弹出select选择的值,当单击按钮的时候就会执行的一个方法，它的作用就是alert select值
2013-04-04
让你的CSS像Jquery一样做筛选的实现方法
用Jquery去操作HTML元素很方便，能够灵活自如的去查找。其实CSS也可以灵活方便的去查找筛选，以下用到的一些，整理了一下，还有很多有趣的用法，后续会继续添加。
2011-07-07
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
这几天，遇到了json格式在JS和Jquey的环境中，需要相互转换，在网上查了一下，大多为缺胳膊少腿，也许咱是菜鸟吧，终于测试成功后，还是给初学者们一个实例吧
2013-07-07
jQuery链式操作实例分析
这篇文章主要介绍了jQuery链式操作,实例分析了jQuery基于链式操作动态改变页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
jQuery实现上下滚动公告栏详细代码
之前做项目的时候，一直都想着做一个上下滚动的公告栏，作为展示网站的最新公告信息，给用户带来极好的用户体验，下面小编通过实例代码给大家分享基于jQuery实现上下滚动公告栏，感兴趣的朋友一起看看吧
2018-11-11