Jquery에서 카운트다운을 작성하는 방법-프런트엔드 Q&A-php.cn

Jquery에서 카운트다운을 작성하는 방법

PHPz

풀어 주다： 2023-05-28 22:25:38

원래의

1177명이 탐색했습니다.

인터넷의 급속한 발전으로 인해 카운트다운 기능은 웹사이트 개발의 일반적인 요구 사항 중 하나가 되었습니다. 프런트 엔드 페이지에서 카운트다운을 구현하는 가장 일반적인 방법은 JavaScript 라이브러리에서 jQuery 플러그인을 사용하는 것입니다.

이 기사에서는 jQuery 플러그인을 사용하여 웹 페이지에 카운트다운 기능을 구현하는 구체적인 방법을 소개합니다.

1. HTML에서 카운트다운 블록 만들기

먼저 HTML 페이지에 카운트다운 블록을 만들어야 합니다. 예:

<div id="countdown">
  <div class="countdown-section">
    <span class="countdown-amount days">0</span>
    <div class="countdown-period">Days</div>
  </div>
  <div class="countdown-section">
    <span class="countdown-amount hours">0</span>
    <div class="countdown-period">Hours</div>
  </div>
  <div class="countdown-section">
    <span class="countdown-amount minutes">0</span>
    <div class="countdown-period">Minutes</div>
  </div>
  <div class="countdown-section">
    <span class="countdown-amount seconds">0</span>
    <div class="countdown-period">Seconds</div>
  </div>
</div>

로그인 후 복사

여기에서는 4개의 하위 요소가 있는 div를 사용합니다. 각 하위 요소는 일, 시, 분, 초를 포함한 시간 차원입니다. 그 중 각 시간 차원은 웹 페이지에 실시간으로 시간 데이터를 표시하는 데 사용되는 범위(span) 요소와 div 요소로 구성되며, div 요소는 시간 차원을 표시하는 데 사용됩니다.

2. jQuery 플러그인 소개

카운트다운 기능을 구현하기 전에 페이지에 jQuery 라이브러리를 추가해야 합니다. HTML에 다음 코드를 추가하세요.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

로그인 후 복사

카운트다운 플러그인을 사용하여 카운트다운을 구현하기 전에 카운트다운 플러그인 자체를 HTML 파일에 추가해야 합니다.

3. 카운트다운 플러그인을 도입하고 카운트다운을 구현합니다.

<script src="jquery.countdown.js"></script>
<script>
  $('#countdown').countdown('2022/01/01', function(event) {
    $(this).html(event.strftime('<div class="countdown-section"><span class="countdown-amount days">%D</span><div class="countdown-period">Days</div></div><div class="countdown-section"><span class="countdown-amount hours">%H</span><div class="countdown-period">Hours</div></div><div class="countdown-section"><span class="countdown-amount minutes">%M</span><div class="countdown-period">Minutes</div></div><div class="countdown-section"><span class="countdown-amount seconds">%S</span><div class="countdown-period">Seconds</div></div>'));
  });
</script>

로그인 후 복사

이 코드는 2022/01/01까지 카운트다운 블록에 카운트다운 기능을 추가합니다. 동시에 시간을 나타내는 HTML 콘텐츠도 만들어집니다.

4. 맞춤 플러그인 구현 세부정보

이제 페이지에 기본 카운트다운 효과를 성공적으로 구현했습니다. 그러나 이 효과는 추가로 사용자 정의할 수 있습니다.

예를 들어 카운트다운이 끝난 후 수행해야 하는 작업을 설정할 수 있습니다.

<script>
  $('#countdown').countdown('2022/01/01', function(event) {
    $(this).html(event.strftime('<div class="countdown-section"><span class="countdown-amount days">%D</span><div class="countdown-period">Days</div></div><div class="countdown-section"><span class="countdown-amount hours">%H</span><div class="countdown-period">Hours</div></div><div class="countdown-section"><span class="countdown-amount minutes">%M</span><div class="countdown-period">Minutes</div></div><div class="countdown-section"><span class="countdown-amount seconds">%S</span><div class="countdown-period">Seconds</div></div>'));
  }).on('finish.countdown', function(event) {
    $(this).html('The countdown is finished!');
  });
</script>

로그인 후 복사

이 코드에서는 카운트다운이 끝난 후 콜백 함수를 추가하여 카운트다운이 끝난 후 카운트다운 블록에 " 카운트다운이 끝났습니다!" ".

콜백 기능을 설정하는 것 외에도 다른 속성을 사용하여 카운트다운 동작을 맞춤 설정할 수도 있습니다. 예를 들어 카운트다운 업데이트 빈도를 설정할 수 있습니다.

$('#countdown').countdown('2022/01/01', { 
  interval: 1000 
}, function(event) {
  // ...
});

로그인 후 복사

여기에서는 1000밀리초마다 업데이트되도록 카운트다운 블록을 설정합니다.

5. 요약

jQuery 플러그인을 사용하여 카운트다운을 구현하는 것은 프런트 엔드 개발의 일반적인 요구 사항입니다. jQuery 플러그인을 사용하면 매우 간단하게 웹사이트에 아름답고 실용적인 카운트다운 효과를 추가할 수 있습니다. 이 기사에서는 기본 카운트다운 구현 솔루션을 제공하고 사용자 정의 플러그인 속성을 통해 더 많은 기능적 요구 사항을 구현하는 방법도 소개합니다.

위 내용은 Jquery에서 카운트다운을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!