jquery怎麼寫倒數計時-前端問答-PHP中文網

jquery怎麼寫倒數計時

PHPz

發布： 2023-05-28 22:25:38

原創

1206 人瀏覽過

隨著網路的快速發展，倒數計時功能已經成為了網站開發中常見的需求之一。而在前端頁面中實現倒數計時最常見的方式就是使用JavaScript庫中的jQuery插件。

本篇文章將為大家介紹使用jQuery外掛實現網頁倒數功能的具體方法。

一、在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>

登入後複製

在這裡，我們使用了一個具有四個子元素的div，每個子元素對應一個時間維度，包括天數、小時、分鐘和秒數。其中，每個時間維度都由一個span元素和一個div元素構成，span元素將用於在網頁上即時顯示時間數據，而div元素則用於顯示時間維度。

二、引入jQuery外掛

在實作倒數功能之前，需要將jQuery庫加入到頁面上來。將以下程式碼加入你的HTML：

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

登入後複製

在使用倒數計時器外掛程式實現倒數計時之前，我們需要先將倒數插件本身加入到HTML檔案中。

三、引入倒數插件並實現倒數計時

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

登入後複製

這段程式碼將為countdown區塊添加一個倒數功能，直到2022/01/01。同時，表示時間的HTML內容將會由它來做出。

四、自訂外掛實作細節

現在，我們已經成功地在頁面上實作了一個基本的倒數效果。但是，這個效果還可以進一步的自訂化。

例如，我們可以設定倒數結束後需要執行的動作：

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

登入後複製

在這個程式碼中，我們在倒數結束後添加了一個回調函數，使得倒數結束後，倒數區塊會顯示"The countdown is finished!"。

除了設定回呼函數以外，我們還可以使用其他的屬性來自訂實現倒數計時的行為。例如，我們可以設定倒數計時更新的頻率：

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

登入後複製

這裡，我們設定每隔1000毫秒更新一次倒數區塊。

五、總結

使用jQuery外掛實現倒數計時是前端開發中常見的需求。透過使用jQuery插件，我們可以非常簡單地為網站添加一個優美實用的倒數計時效果。在這篇文章中，我們提供了一個基本的倒數實現方案，同時也介紹如何透過自訂外掛屬性來實現更多的功能需求。

以上是jquery怎麼寫倒數計時的詳細內容。更多資訊請關注PHP中文網其他相關文章！