jQuery时间插件jquery.clock.js用法实例(5个示例)
本文实例讲述了jQuery时间插件jquery.clock.js用法。分享给大家供大家参考，具体如下：
Example1:
Basicclock,nooptions
<html>
<head>
<title>jclock</title>
<mce:scripttype="text/javascript"src="jquery-1.2.1.min.js"mce_src="jquery-1.2.1.min.js"></mce:script>
<mce:scripttype="text/javascript"src="jquery.jclock.js"mce_src="jquery.jclock.js"></mce:script>
<mce:scripttype="text/javascript"><!--
$(function($){
$('.jclock').jclock();
});
//--></mce:script>
</head>
<body>
<divclass="jclock"></div>
</body>
</html>
Example2:
Clock,non-UTC,withoptions
<html>
<head>
<title>jclock</title>
<mce:scripttype="text/javascript"src="jquery-1.2.1.min.js"mce_src="jquery-1.2.1.min.js"></mce:script>
<mce:scripttype="text/javascript"src="jquery.jclock.js"mce_src="jquery.jclock.js"></mce:script>
<mce:scripttype="text/javascript"><!--
$(function($){
varoptions={
timeNotation:'12h',
am_pm:true,
fontFamily:'Verdana,TimesNewRoman',
fontSize:'20px',
foreground:'yellow',
background:'red'
}
$('.jclock').jclock(options);
});
//--></mce:script>
</head>
<body>
<divclass="jclock"></div>
</body>
Example3:
Clock,UTC
<html>
<head>
<title>jclock
<mce:scripttype="text/javascript"src="jquery-1.2.1.min.js"mce_src="jquery-1.2.1.min.js"></mce:script>
<mce:scripttype="text/javascript"src="jquery.jclock.js"mce_src="jquery.jclock.js"></mce:script>
<mce:scripttype="text/javascript"><!--
$(function($){
varoptions={
utc:true
}
$('.jclock').jclock(options);
});
//--></mce:script>
</title></head>
<body>
<divclass="jclock"></div>
</body>
</html>
Example4:
Multipleclocksusingdifferenttimezoneoffsets
<html>
<head>
<title>jclock</title>
<mce:scripttype="text/javascript"src="jquery-1.2.1.min.js"mce_src="jquery-1.2.1.min.js"></mce:script>
<mce:scripttype="text/javascript"src="jquery.jclock.js"mce_src="jquery.jclock.js"></mce:script>
<mce:scripttype="text/javascript"><!--
$(function($){
varoptionsEST={
utc:true,
utc_offset:-5
}
$('#jclock1').jclock(optionsEST);
varoptionsCST={
utc:true,
utc_offset:-6
}
$('#jclock2').jclock(optionsCST);
varoptionsIndia={
utc:true,
utc_offset:5.5
}
$('#jclock3').jclock(optionsIndia);
});
//--></mce:script>
</head>
<body>
<p>EST:<spanid="jclock1"></span></p>
<p>CST:<spanid="jclock2"></span></p>
<p>India:<spanid="jclock3"></span></p>
</body>
</html>
Example5:
Styledclocks(firstclockusesjquery.corner.js)
<html>
<head>
<title>jclock</title>
<mce:styletype="text/css"><!--
body{
font:Verdana,Arial,sans-serif;
/*AnexplicitbackgroundcolorisrequiredforSafari.*/
/*Otherwiseyourcornerchunkswillcomeoutblack!*/
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><styletype="text/css"mce_bogus="1">body{
font:Verdana,Arial,sans-serif;
/*AnexplicitbackgroundcolorisrequiredforSafari.*/
/*Otherwiseyourcornerchunkswillcomeoutblack!*/
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:scripttype="text/javascript"src="jquery-1.2.1.min.js"mce_src="jquery-1.2.1.min.js"></mce:script>
<mce:scripttype="text/javascript"src="jquery.jclock.js"mce_src="jquery.jclock.js"></mce:script>
<mce:scripttype="text/javascript"src="jquery.corner.js"mce_src="jquery.corner.js"></mce:script>
<mce:scripttype="text/javascript"><!--
$(function($){
varoptions={
timeNotation:'12h',
am_pm:true,
fontFamily:'Verdana,TimesNewRoman',
fontSize:'20px',
foreground:'yellow',
background:'red'
}
$('.jclock').jclock(options);
$('.corner').corner("30px");
});
//--></mce:script>
</head>
<body>
<p><divclass="corner"><divclass="jclock"></div></div></p>
<p><divclass="nocorner"><divclass="jclock"></div></div></p>
</body>
</html>
希望本文所述对大家jQuery程序设计有所帮助。