用 PHP 建立倒數計時器

Subodh Poudel 2023年1月30日
  1. 在 PHP 中建立一個靜態倒數計時器
  2. 在 PHP 中使用 TimeCircles.js 建立動態倒數計時器
用 PHP 建立倒數計時器

在本文中,我們將介紹幾種在 PHP 中建立倒數計時器的方法。我們可以僅使用 PHP 建立一個靜態倒數計時器。要製作動態倒數計時器,我們將不得不使用 JavaScript。

在 PHP 中建立一個靜態倒數計時器

我們可以使用 PHP 建立一個靜態倒數計時器。計時器只會在我們重新整理頁面時更新。否則,計時器將保持不變。PHP 在伺服器上執行,當需要來自伺服器的新資訊時,應該重新整理頁面。倒數計時器工作得很好,但我們必須在看到進度時重新整理網頁。

我們將使用 PHP 函式 time() 來獲取當前時間。我們可以找出目標日期和當前時間之間的差異,並將它們格式化為天、小時、分鐘和秒。我們將使用 floor() 函式,同時將剩餘時間轉換為其他單位。該函式會將結果向下舍入到最接近的整數。因此,新計算的時間單位將是準確的。time() 函式給出自 1970 年 1 月 1 日 00:00:00 GMT 以來的當前時間(以秒為單位)。我們可以使用 EpochConverter 將當前日期和時間轉換為時間戳,反之亦然。

例如,選擇一個目標日期並使用 EpochConverter 將日期轉換為 Epoch 時間戳。然後,建立一個變數 $waiting_day 併為其分配時間戳。然後找出 $waiting_day 和當前時間之間的差異,並將結果儲存在變數 $time_left 中。現在,計算總天數除以 $time_left 與一天中的總秒數,60*60*60。轉換時使用 floor() 函式。將結果儲存在 $days 變數中。接下來,更新 $time_left 變數以查詢以秒為單位的剩餘小時數。為此,在將 $time_left 除以 60*60*60 的同時求餘數。使用 % 運算子查詢餘數。同樣,找到剩餘的小時、分鐘和秒。要找到小時,請將 $time_left 除以 60*60,要找到分鐘,請除以 60。剩餘的時間戳將以秒為單位。最後,列印儲存天、小時、分鐘和秒的所有變數。

因此,我們使用 PHP 建立了一個靜態倒數計時器。

示例程式碼:

<?php
    $waiting_day = 1637210196;
    $time_left = $waiting_day - time();

    $days = floor($time_left / (60*60*24));
    $time_left %= (60 * 60 * 24);

    $hours = floor($time_left / (60 * 60));
    $time_left %= (60 * 60);

    $min = floor($time_left / 60);
    $time_left %= 60;

    $sec = $time_left;

    echo "Remaing time: $days days and $hours hours and $min min and $sec sec left";
?>

輸出:

Remaing time: 17 days and 23 hours and 51 min and 26 sec left 

在 PHP 中使用 TimeCircles.js 建立動態倒數計時器

我們可以使用 PHP 中的 TimeCircles.js 庫建立一個動態倒數計時器。倒數計時器將在不重新整理網頁的情況下自行更新。TimeCircles 是一個 jQuery 外掛,可幫助輕鬆建立倒數計時器。我們可以使用 CDN 在我們的指令碼中包含 TimeCircles.js 和 jQuery。指令碼標籤如下。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.min.js" integrity="sha512-FofOhk0jW4BYQ6CFM9iJutqL2qLk6hjZ9YrS2/OnkqkD5V4HFnhTNIFSAhzP3x//AD5OzVMO8dayImv06fq0jA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

例如,建立一個帶有 data-date 屬性的 div。將 PHP 寫為屬性的值。使用 echo 功能顯示目標日期 2019-02-12 07:25:14。接下來,將 divid 設定為 cd_timer。接下來,開啟 script 標籤並編寫一些 jQuery。編寫一個函式並選擇 id cd_timer 並呼叫 TimeCircles() 函式。

當我們從 localhost 執行網頁時,我們可以看到一個倒數計時器,顯示剩餘的天數、小時數、分鐘數和秒數。通過這種方式,我們可以在 PHP 中使用 TimeCircle.js 建立一個動態倒數計時器。

示例程式碼:

<div data-date="<?php echo '2019-02-12 07:25:14' ; ?>" id="cd_timer"></div>
<script>
 $(function () {
 $("#cd_timer").TimeCircles();
 });
</script>
作者: Subodh Poudel
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn