用 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
。接下來,將 div
的 id
設定為 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 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