jQuery时间插件jquery.clock.js用法实例(5个示例)


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程序设计有所帮助。

Javascript 相关文章推荐
原生javascript实现隔行换色
Jan 04 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 #Javascript
JavaScript基本语法学习教程
Jan 14 #Javascript
JavaScript对象参数的引用传递
Jan 14 #Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 #Javascript
AngularJS初始化静态模板详解
Jan 14 #Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 #Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 #Javascript
You might like
那些年一起学习的PHP(二)
2012/03/21 PHP
php时区转换转换函数
2014/01/07 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
flask实现验证码并验证功能
2019/12/05 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
安全大检查反思材料
2014/01/31 职场文书
周年庆典主持词
2014/04/02 职场文书
师德模范事迹材料
2014/06/03 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
redis数据一致性的实现示例
2022/03/18 Redis
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技