社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 js教程 jQuery时间插件jquery.clock.js用法实例(5个示例)_jquery

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
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工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前 By DDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7471
15
CakePHP 教程
1377
52
steam的賬戶名稱是什麼格式
77
11
win11激活密鑰永久
48
19
NYT連接提示和答案
19
30
顯示更多
Related knowledge
抖音10級燈牌多少錢？ 10級粉絲燈牌需要幾天？ 抖音10級燈牌多少錢？ 10級粉絲燈牌需要幾天？ Mar 11, 2024 pm 05:37 PM

在抖音平台上，許多用戶都渴望獲得等級認證，其中10級燈牌更是展示用戶在抖音上的影響力和認可度。本文將深入探討抖音10級燈牌的價格以及達到此等級所需的時間，以幫助使用者更了解此過程。一、抖音10級燈牌多少錢？抖音10級燈牌的價格會受市場波動和供需情況的影響而有所差異，一般價格在幾千元到萬元之間。這個價格主要包括燈牌本身的成本和可能的服務費用。用戶可透過抖音官方管道或第三方服務機構購買10級燈牌，但在購買時要留意選擇合法管道，以免遭遇虛假或詐欺交易。二、10級粉絲燈牌要幾天？達到10級燈牌

Chrome的插件擴充功能安裝目錄是什麼 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瀏覽器不支援此外掛程式的三種解決方法 分享Edge瀏覽器不支援此外掛程式的三種解決方法 Mar 13, 2024 pm 04:34 PM

　　用戶使用Edge瀏覽器的過程中可能會添加一些插件來滿足自己更多的使用需求。但是在添加插件時顯示不支援此插件，這該如何解決？今日小編就來給大家分享三種解決方法，快來試試看。　　方法一：嘗試用其他的瀏覽器。　　方法二：瀏覽器上的FlashPlayer可能過時或遺失，導致此外掛程式不受支援狀態，可在官網下載最新版本。　　方法三：同時按下「Ctrl+Shift+Delete」鍵。　　點選“清除資料”，重新開啟瀏覽器即可。

艾爾登法環通關需要多久 艾爾登法環通關需要多久 Mar 11, 2024 pm 12:50 PM

玩家在艾爾登法環中進行遊戲時可以體驗遊戲主線劇情，以及收集遊戲成就，有很多玩家不知道艾爾登法環通關需要多久，玩家的通關流程在30個小時。艾爾登法環通關需要多久答：30小時。 1、這個30小時的通關時長指的雖然不是高手般的速通，但也省略了許多的流程。 2.如果你想獲得更好的遊戲體驗或是體驗完整的劇情，那麼時長上肯定要花費更多的時間。 3.如果玩家是全收集大約要100-120小時。 4.如果是只走主線刷BOSS大約：50-60小時。 5.如果是想全部體驗：150小時打底。

小紅書發佈作品時間怎麼設定？發布作品時間準確嗎？ 小紅書發佈作品時間怎麼設定？發布作品時間準確嗎？ Mar 24, 2024 pm 01:31 PM

小紅書，一個充滿生活氣息與知識分享的平台，讓越來越多的創作者在這裡暢所欲言。要想在小紅書上獲得更多的關注和點贊，除了內容品質之外，發布作品的時間也是至關重要的。那麼，如何設定小紅書發布作品的時間呢？一、小紅書發布作品時間怎麼設定？ 1.了解用戶活躍時間首先，需要先明確小紅書用戶的活躍時間。通常來說，晚上8點到10點以及週末下午是用戶活躍度較高的時段。然而，這個時段也會受到受眾群體和地理等因素的影響而有所不同。因此，為了更能掌握用戶活躍時段，建議對不同族群的行為習慣進行更詳細的分析。透過了解用戶的活

命運方舟困夢什麼時候出 命運方舟困夢什麼時候出 Mar 14, 2024 pm 03:00 PM

許多玩家想問命運方舟困夢什麼時候出，困夢將在3月13日與我們見面，其次還有全新職業格鬥家男、全新大陸羅溫、神選英雄武器、新增BOSS等內容，具體內容一起來看看這篇命運方舟困夢上線時間介紹。命運方舟攻略大全命運方舟困夢何時出答：3月13日道具等級要求關卡1-關卡3需要道具等級達到：1540關卡4需要道具等級達到：1560掉落物品：夢幻之念、夢幻標誌、墜落絕望之角。全新職業格鬥家男1、特性：修羅能量，積攢修羅能量進入【拳王態勢】2、職業屬性：近戰職業3、職業武器：重臂鎧。全新大陸羅溫1、開啟方法

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

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

See all articles