jQuery time plug-in jquery.clock.js usage examples (5 examples)

Home

Web Front-end

JS Tutorial

jQuery time plug-in jquery.clock.js usage examples (5 examples)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

jquery plug-in time

The example in this article describes the usage of jQuery time plug-in jquery.clock.js. Share it with everyone for your reference, the details are as follows:

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

I hope this article will be helpful to everyone in jQuery programming.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7487

CakePHP Tutorial

1377

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How much does a Douyin level 10 light sign cost? How many days does it take to create a level 10 fan sign? Mar 11, 2024 pm 05:37 PM

On the Douyin platform, many users are eager to obtain level certification, and the level 10 light sign shows the user's influence and recognition on Douyin. This article will delve into the price of Douyin’s level 10 light boards and the time it takes to reach this level to help users better understand the process. 1. How much does a level 10 Douyin light sign cost? The price of Douyin's 10-level light signs will vary depending on market fluctuations and supply and demand. The general price ranges from a few thousand yuan to ten thousand yuan. This price mainly includes the cost of the light sign itself and possible service fees. Users can purchase level 10 light signs through Douyin’s official channels or third-party service agencies, but they should pay attention to legal channels when purchasing to avoid false or fraudulent transactions. 2. How many days does it take to create a level 10 fan sign? Reach level 10 light sign

What is the Chrome plug-in extension installation directory? Mar 08, 2024 am 08:55 AM

What is the Chrome plug-in extension installation directory? Under normal circumstances, the default installation directory of Chrome plug-in extensions is as follows: 1. The default installation directory location of chrome plug-ins in windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2. chrome in windows7 The default installation directory location of the plug-in: C:\Users\username\AppData\Local\Google\Chrome\User

Share three solutions to why Edge browser does not support this plug-in Mar 13, 2024 pm 04:34 PM

When users use the Edge browser, they may add some plug-ins to meet more of their needs. But when adding a plug-in, it shows that this plug-in is not supported. How to solve this problem? Today, the editor will share with you three solutions. Come and try it. Method 1: Try using another browser. Method 2: The Flash Player on the browser may be out of date or missing, causing the plug-in to be unsupported. You can download the latest version from the official website. Method 3: Press the "Ctrl+Shift+Delete" keys at the same time. Click "Clear Data" and reopen the browser.

How long does it take to clear the Elden Ring? Mar 11, 2024 pm 12:50 PM

Players can experience the main plot of the game and collect game achievements when playing in Elden's Circle. Many players don't know how long it takes to clear Elden's Circle. The player's clearance process is 30 hours. How long does it take to clear the Elden Ring? Answer: 30 hours. 1. Although this 30-hour clearance time does not refer to a master-like speed pass, it also omits a lot of processes. 2. If you want to get a better game experience or experience the complete plot, then you will definitely need to spend more time on the duration. 3. If players collect them all, it will take about 100-120 hours. 4. If you only take the main line to brush BOSS, it will take about 50-60 hours. 5. If you want to experience it all: 150 hours of base time.

How to set the time for publishing works on Xiaohongshu? Is the time for publishing the work accurate? Mar 24, 2024 pm 01:31 PM

Xiaohongshu, a platform full of life and knowledge sharing, allows more and more creators to express their opinions freely. In order to get more attention and likes on Xiaohongshu, in addition to the quality of content, the time of publishing works is also crucial. So, how to set the time for Xiaohongshu to publish works? 1. How to set the time for publishing works on Xiaohongshu? 1. Understand the active time of users. First, it is necessary to clarify the active time of Xiaohongshu users. Generally speaking, 8 pm to 10 pm and weekend afternoons are the times when user activity is high. However, this time period will also vary depending on factors such as audience group and geography. Therefore, in order to better grasp the active period of users, it is recommended to conduct a more detailed analysis of the behavioral habits of different groups. By understanding users’ lives

When will Ark of Destiny Dreams come out? Mar 14, 2024 pm 03:00 PM

Many players want to ask when Ark of Destiny Sleepy Dream will be released. Sleepy Dream will meet us on March 13th. There will also be new professional fighter Jia Nan, new continent Rowan, God's Chosen Hero Weapons, new BOSS and other content. Specific details Let’s take a look at the content of this introduction to the launch time of Ark of Destiny Sleepy Dreams. Ark of Destiny Guide: When will Ark of Destiny Dreams be released? Answer: March 13th. Item level requirements. Level 1-Level 3 requires props level: 1540. Level 4 requires props level: 1560. Dropped items: Dream Thoughts, Dream Mark, Falling into despair. Brand new professional fighter male 1. Characteristics: Shura energy, accumulate Shura energy to enter [Kingdom Boxing State] 2. Professional attributes: Melee profession 3. Professional weapon: heavy arm armor. New Continent Rowan 1. How to open it

jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

See all articles