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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

jquery 插件时间

本文实例讲述了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程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7392

Java教程

1630

CakePHP 教程

1357

Laravel 教程

1268

PHP教程

1216

显示更多

Related knowledge

抖音10级灯牌多少钱？10级粉丝灯牌需要几天？ Mar 11, 2024 pm 05:37 PM

在抖音平台上，许多用户都渴望获得等级认证，其中10级灯牌更是展示用户在抖音上的影响力和认可度。本文将深入探讨抖音10级灯牌的价格以及达到这一等级所需的时间，以帮助用户更好地了解这一过程。一、抖音10级灯牌多少钱？抖音10级灯牌的价格会受市场波动和供需情况的影响而有所差异，一般价格在几千元到万元之间。这个价格主要包括灯牌本身的成本和可能的服务费用。用户可以通过抖音官方渠道或第三方服务机构购买10级灯牌，但在购买时要留意选择合法渠道，以免遭遇虚假或欺诈交易。二、10级粉丝灯牌需要几天？达到10级灯牌

Chrome的插件扩展程序安装目录是什么 Mar 08, 2024 am 08:55 AM

Chrome的插件扩展程序安装目录是什么？正常情况下，Chrome插件扩展程序的默认安装目录如下：1、windowsxp中chrome插件默认安装目录位置:C:\DocumentsandSettings\用户名\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件默认安装目录位置:C:\Users\用户名\AppData\Local\Google\Chrome\User

分享Edge浏览器不支持此插件的三种解决办法 Mar 13, 2024 pm 04:34 PM

　　用户使用Edge浏览器的过程中可能会添加一些插件来满足自己更多的使用需求。但是在添加插件时显示不支持此插件，这该如何解决？今日小编就来给大家分享三种解决办法，快来试试吧。　　方法一：尝试用其他的浏览器。　　方法二：浏览器上的FlashPlayer可能过时或者丢失，导致此插件不受支持状态，可在官网下载最新版本。　　方法三：同时按下“Ctrl+Shift+Delete”键。　　点击“清除数据”，重新打开浏览器即可。

小红书发布作品时间怎么设置？发布作品时间准确吗？ Mar 24, 2024 pm 01:31 PM

小红书，一个充满生活气息与知识分享的平台，让越来越多的创作者在此畅所欲言。要想在小红书上获得更多的关注和点赞，除了内容质量之外，发布作品的时间也是至关重要的。那么，如何设置小红书发布作品的时间呢？一、小红书发布作品时间怎么设置？1.了解用户活跃时间首先，需要明确小红书用户的活跃时间。通常来说，晚上8点到10点以及周末下午是用户活跃度较高的时段。然而，这个时间段也会受到受众群体和地域等因素的影响而有所不同。因此，为了更好地把握用户活跃时段，建议对不同群体的行为习惯进行更详细的分析。通过了解用户的活

艾尔登法环通关需要多久 Mar 11, 2024 pm 12:50 PM

玩家在艾尔登法环中进行游戏时可以体验游戏主线剧情，以及收集游戏成就，有很多玩家不知道艾尔登法环通关需要多久，玩家的通关流程在30个小时。艾尔登法环通关需要多久答：30个小时。1、这个30个小时的通关时长指的虽然不是高手般的速通，但是也省略了很多的流程。2、如果你想获得更好的游戏体验或者是体验完整的剧情，那么时长上肯定要花费更多的时间。3、如果玩家是全收集大约要100-120小时。4、如果是只走主线刷BOSS大约：50-60小时。5、如果是想全部体验：150小时打底。

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

命运方舟困梦什么时候出 Mar 14, 2024 pm 03:00 PM

很多玩家想问命运方舟困梦什么时候出，困梦将在3月13日与我们见面，其次还有全新职业格斗家男、全新大陆罗温、神选英雄武器、新增BOSS等内容，具体内容一起来看看这篇命运方舟困梦上线时间介绍。命运方舟攻略大全命运方舟困梦什么时候出答：3月13日道具等级要求关卡1-关卡3需要道具等级达到：1540关卡4需要道具等级达到：1560掉落物品：梦幻之念、梦幻标志、坠落绝望之角。全新职业格斗家男1、特性：修罗能量，积攒修罗能量进入【拳王态势】2、职业属性：近战职业3、职业武器：重臂铠。全新大陆罗温1、开启方法

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题