Posted in Javascript onJanuary 14, 2016
本文实例讲述了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.clock.js用法实例(5个示例)
- Author -
乘着风在飞声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@