웹 프론트엔드 JS 튜토리얼 jQuery 시간 플러그인 jquery.clock.js 사용 예(예제 5개)_jquery

jQuery 시간 플러그인 jquery.clock.js 사용 예(예제 5개)_jquery

May 16, 2016 pm 03:20 PM
jquery 플러그인 시간

이 기사의 예에서는 jQuery 시간 플러그인 jquery.clock.js의 사용법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

예 1:

기본 시계, 옵션 없음

<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>

로그인 후 복사

예 2:

시계, 비UTC, 옵션 포함

<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>

로그인 후 복사

예 3:

시계, 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>

로그인 후 복사

예 4:

다른 시간대 오프셋을 사용하는 여러 시계

<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>

로그인 후 복사

예 5:

스타일 시계(첫 번째 시계는 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 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Douyin 레벨 10 조명 표지판의 가격은 얼마입니까? 레벨 10 팬사인회 제작에는 며칠이 소요되나요? Douyin 레벨 10 조명 표지판의 가격은 얼마입니까? 레벨 10 팬사인회 제작에는 며칠이 소요되나요? Mar 11, 2024 pm 05:37 PM

Douyin 플랫폼에서는 많은 사용자가 레벨 인증을 받기를 열망하고 있으며 레벨 10 표시등은 Douyin에 대한 사용자의 영향력과 인식을 보여줍니다. 이 기사에서는 사용자가 프로세스를 더 잘 이해할 수 있도록 Douyin의 레벨 10 라이트 보드 가격과 이 레벨에 도달하는 데 걸리는 시간을 자세히 살펴보겠습니다. 1. 레벨 10 Douyin 라이트 사인의 가격은 얼마입니까? Douyin의 10단계 전광판 가격은 시장 변동과 수요 공급에 따라 달라질 수 있으며, 일반적인 가격은 수천 위안에서 만 위안까지 다양합니다. 이 가격에는 주로 조명 사인 자체 비용과 가능한 서비스 수수료가 포함됩니다. 사용자는 Douyin의 공식 채널이나 제3자 서비스 대행사를 통해 레벨 10 조명 간판을 구매할 수 있지만, 허위 또는 사기 거래를 피하기 위해 구매 시 법적 채널에 주의해야 합니다. 2. 레벨 10 팬사인을 만드는데 며칠이 걸리나요? 레벨 10 신호등에 도달하세요

Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? Mar 08, 2024 am 08:55 AM

Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? 일반적인 상황에서 Chrome 플러그인 확장의 기본 설치 디렉터리는 다음과 같습니다. 1. windowsxp에서 Chrome 플러그인의 기본 설치 디렉터리 위치: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Windows7의 Default\Extensions2.chrome 플러그인의 기본 설치 디렉터리 위치: C:\Users\username\AppData\Local\Google\Chrome\User

Edge 브라우저가 이 플러그인을 지원하지 않는 이유에 대한 세 가지 해결 방법을 공유하세요. Edge 브라우저가 이 플러그인을 지원하지 않는 이유에 대한 세 가지 해결 방법을 공유하세요. Mar 13, 2024 pm 04:34 PM

사용자가 Edge 브라우저를 사용할 때 더 많은 요구 사항을 충족하기 위해 일부 플러그인을 추가할 수 있습니다. 그런데 플러그인을 추가하면 해당 플러그인이 지원되지 않는다고 표시됩니다. 이 문제를 해결하는 방법은 무엇입니까? 오늘은 에디터가 세 가지 해결 방법을 알려드리겠습니다. 방법 1: 다른 브라우저를 사용해 보세요. 방법 2: 브라우저의 Flash Player가 오래되었거나 누락되어 플러그인이 지원되지 않을 수 있습니다. 공식 웹사이트에서 최신 버전을 다운로드할 수 있습니다. 방법 3: "Ctrl+Shift+Delete" 키를 동시에 누르세요. "데이터 지우기"를 클릭하고 브라우저를 다시 엽니다.

Xiaohongshu에 작품 출판 시간을 설정하는 방법은 무엇입니까? 작품 출판 시기는 정확합니까? Xiaohongshu에 작품 출판 시간을 설정하는 방법은 무엇입니까? 작품 출판 시기는 정확합니까? Mar 24, 2024 pm 01:31 PM

생활과 지식 공유가 가득한 플랫폼 샤오홍슈를 통해 점점 더 많은 창작자들이 자유롭게 자신의 의견을 표현할 수 있게 되었습니다. Xiaohongshu에 대한 관심과 좋아요를 더 많이 얻으려면 콘텐츠의 질뿐만 아니라 작품을 출판하는 시기도 중요합니다. 그렇다면 Xiaohongshu의 작품 출판 시간은 어떻게 설정합니까? 1. 소홍서 작품 출판 시기는 어떻게 정하나요? 1. 사용자의 활동시간을 이해한다. 먼저 Xiaohongshu 사용자의 활동시간을 명확히 할 필요가 있다. 일반적으로 오후 8시부터 10시까지와 주말 오후는 사용자 활동이 많은 시간입니다. 그러나 이 기간은 잠재고객 세그먼트 및 지역과 같은 요인에 따라 달라질 수도 있습니다. 따라서 사용자의 활동 기간을 더 잘 파악하기 위해서는 그룹별 행동 습관에 대한 보다 자세한 분석을 수행하는 것이 좋습니다. 사용자의 삶을 이해함으로써

엘든 링을 클리어하는 데 얼마나 걸리나요? 엘든 링을 클리어하는 데 얼마나 걸리나요? Mar 11, 2024 pm 12:50 PM

플레이어는 Elden's Circle에서 플레이할 때 게임의 주요 줄거리를 경험하고 게임 성과를 수집할 수 있습니다. 많은 플레이어는 Elden's Circle을 클리어하는 데 시간이 얼마나 걸리는지 모릅니다. 엘든 링을 클리어하는데 얼마나 걸리나요? 답변: 30시간. 1. 이 30시간 통관시간은 마스터급 스피드패스를 의미하지는 않지만, 많은 과정을 생략하기도 합니다. 2. 더 나은 게임 경험을 원하거나 전체 줄거리를 경험하고 싶다면 반드시 지속 시간에 더 많은 시간을 할애해야 합니다. 3. 모두 모으는 데에는 약 100~120시간 정도 소요됩니다. 4. 본선만 타고 BOSS 브러싱을 하면 50~60시간 정도 소요됩니다. 5. 모든 것을 경험하고 싶다면: 기본 시간 150시간.

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. &lt

Ark of Destiny Dreams는 언제 출시되나요? Ark of Destiny Dreams는 언제 출시되나요? Mar 14, 2024 pm 03:00 PM

많은 플레이어들이 슬리피드림의 방주가 3월 13일에 출시될지 궁금해하고 있습니다. 또한 새로운 프로 파이터 지아난, 신의 선택을 받은 영웅 무기, 새로운 BOSS 및 기타 구체적인 콘텐츠도 있을 예정입니다. 세부정보 Ark of Destiny Sleepy Dreams 출시 시기에 대한 소개 내용을 살펴보겠습니다. Ark of Destiny 가이드: Ark of Destiny Dreams는 언제 출시되나요? 답변: 3월 13일. 아이템 레벨 요구 사항: 1레벨~3레벨 요구 사항: 1540. 레벨 4 도달 요구 사항: 1560. 드롭된 아이템: Dream 생각, 드림마크, 절망에 빠진다. 새로운 프로 파이터 남성 1. 특성: 슈라 에너지, 슈라 에너지를 축적하여 [복싱 챔피언 자격]에 진입 2. 전문 특성: 근접 직업 3. 전문 무기: 중팔 갑옷. 신대륙 로완 1. 개봉방법

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.

See all articles