用 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