PHP でカウントダウンタイマーを作成する

1. PHP で静的カウントダウンタイマーを作成する
2. PHP で TimeCircles.js を使用して動的カウントダウンタイマーを作成する

この記事では、PHP でカウントダウンタイマーを作成するためのいくつかの方法を紹介します。PHP のみを使用して静的カウントダウンタイマーを作成できます。動的カウントダウンタイマーを作成するには、JavaScript を使用する必要があります。

PHP で静的カウントダウンタイマーを作成する

PHP を使用して静的カウントダウンタイマーを作成できます。タイマーは、ページを更新したときにのみ更新されます。それ以外の場合、タイマーは同じままになります。PHP はサーバー上で実行され、サーバーから新しい情報が必要になったときにページを更新する必要があります。カウントダウンタイマーは完全に機能しますが、進行状況が表示されるたびに Web ページを更新する必要があります。

PHP 関数 time() を使用して現在の時刻を取得します。目標日と現在の時刻の違いを見つけて、日、時間、分、秒でフォーマットできます。残り時間を他の単位に変換しながら、floor() 関数を使用します。この関数は、結果を最も近い整数に切り捨てます。その結果、新しく計算された時間の単位は正確になります。time() 関数は、1970 年 1 月 1 日 00：00：00GMT からの現在の時刻を秒単位で示します。EpochConverter を使用して、現在の日付と時刻をタイムスタンプに、またはその逆に変換できます。

たとえば、ターゲットの日付を選択し、EpochConverter を使用して日付を Epoch タイムスタンプに変換します。次に、変数 $waiting_day を作成し、それにタイムスタンプを割り当てます。次に、$waiting_day と現在の時刻の違いを見つけて、結果を変数 $time_left に格納します。次に、$time_left を 1 日の合計秒数 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 ライブラリを使用して、動的カウントダウンタイマーを作成できます。カウントダウンタイマーは、Web ページを更新せずに自動的に更新されます。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 を記述します。エコー機能を使用して、目標日 2019-02-12 07:25:14 を表示します。次に、div の id を cd_timer として設定します。次に、script タグを開き、jQuery を記述します。関数を作成し、ID cd_timer を選択して、TimeCircles() 関数を呼び出します。

ローカルホストから Web ページを実行すると、残りの日、時間、分、秒を示すカウントダウンタイマーが表示されます。このようにして、PHP で TimeCircle.js を使用して動的カウントダウンタイマーを作成できます。

サンプルコード：

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