用 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