jQuery插件Clock的五个实例

最新推荐文章于 2021-06-03 06:48:42 发布

一拳超超人

最新推荐文章于 2021-06-03 06:48:42 发布

阅读量4.4k

点赞数

分类专栏：前端文章标签： jquery function class basic

本文链接：https://blog.csdn.net/zalion/article/details/6006430

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Example 1:

Basic clock, no options

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"></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"></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"></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"></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"></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>