手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery时间插件jquery.clock.js用法实例(5个示例)
jQuery时间插件jquery.clock.js用法实例(5个示例)
摘要:本文实例讲述了jQuery时间插件jquery.clock.js用法。分享给大家供大家参考,具体如下:Example1:Basicclock...

本文实例讲述了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></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></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></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><div></div></div></p> <p><div><div></div></div></p> </body> </html>

希望本文所述对大家jQuery程序设计有所帮助。

【jQuery时间插件jquery.clock.js用法实例(5个示例)】相关文章:

JQuery中attr方法和removeAttr方法用法实例

基于jQuery实现的无刷新表格分页实例

jQuery插件zepto.js简单实现tab切换

JavaScript使用addEventListener添加事件监听用法实例

jQuery插件pagewalkthrough实现引导页效果

jQuery解析XML文件同时动态增加js文件的方法

Jquery使用css方法改变样式实例

JQuery中clone方法复制节点

Jquery中基本选择器用法实例详解

JQuery中Text方法用法实例分析

精品推荐
分类导航