jQuery时间插件jquery.clock.js用法实例(5个示例)
本文实例讲述了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插件bxslider用法实例分析，包括了jquery插件bxslider用法实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery插件bxslider用法。分享给大家供大家参考。具体用法如下： 首先调用对应js文件： jQuery代码部分： HTML结构如下: CSS定义左右按钮样式： 参数说明： bxSlider 详细配置参数： bxSlider有
-
本文向大家介绍jQuery弹出层插件popShow用法示例，包括了jQuery弹出层插件popShow用法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery弹出层插件popShow用法。分享给大家供大家参考，具体如下： popShow弹出层 图1.1 弹出层效果 1、引入JS和CSS文件 注意：这里需要引入JQuery库文件。 2、编写HTML代码 3、popShow的使用
-
本文向大家介绍jQuery弹出层插件popShow(改进版)用法示例，包括了jQuery弹出层插件popShow(改进版)用法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery弹出层插件popShow(改进版)用法。分享给大家供大家参考，具体如下： 前面一篇《jQuery弹出层插件popShow用法示例》分析了popShow插件的基本用法，这里再对插件进行一番改进。 popS
-
本文向大家介绍jQuery自适应轮播图插件Swiper用法示例，包括了jQuery自适应轮播图插件Swiper用法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery自适应轮播图插件Swiper用法。分享给大家供大家参考，具体如下： 运行效果截图如下： 示例代码如下： 关于swiper的内容读者可参考相关网站：http://www.swiper.com.cn/download/
-
本文向大家介绍jquery自动补齐功能插件flexselect用法示例，包括了jquery自动补齐功能插件flexselect用法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery自动补齐功能插件flexselect用法。分享给大家供大家参考，具体如下： 这几天正在做一个东东。需要用到自动补齐的功能。也就是select控件的文本项可以让它写。默认的select文本框是只读的，
-
本文向大家介绍pyqt5 使用label控件实时显示时间的实例，包括了pyqt5 使用label控件实时显示时间的实例的使用技巧和注意事项，需要的朋友参考一下 如下所示： 以上这篇pyqt5 使用label控件实时显示时间的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery复合事件用法示例，包括了jQuery复合事件用法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery复合事件用法。分享给大家供大家参考，具体如下： 运行效果图如下： PS：这里再附上javascript常见事件与功能说明的在线对照表供大家参考： javascript事件与功能说明大全： http://tools.jb51.net/table/javas
-
本文向大家介绍jQuery插件echarts去掉垂直网格线用法示例，包括了jQuery插件echarts去掉垂直网格线用法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery插件echarts去掉垂直网格线用法。分享给大家供大家参考，具体如下： 1、问题背景 设计一条统计人数的折线，其中网格线没有垂直线 2、实现源码 （1）有垂直网格线 （2）无垂直网格线 3、实现结果 （1）