使用 time() PHP 和 moment.js 倒计时

Question

我根据加起来为五分钟的当前时间戳的结果编写了倒计时代码，但我无法让脚本显示从该时间戳开始的倒计时。代码完成：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
        <title>Hello, world!</title>
        <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
        <script type="text/javascript">
            var duration = moment.duration(1646486515 * 1000, 'milliseconds');
            var interval = 1000;
            setInterval(function(){
                duration = moment.duration(duration.asMilliseconds() - interval, 'milliseconds');
                $('#time').text(moment(duration.asMilliseconds()).format('h:mm:ss'));
                if(duration.asSeconds() <=0) {
                    window.location.replace(window.location.pathname + window.location.search + window.location.hash);
                }
            }, interval);
        </script>
    </head>
    <body>
        <center><p><h1>Hello, world!</h1></p></center>
        <div class="container mb-2 my-2">
            <div class="p-3 shadow-sm">
                result of code: <span id="time" class="countdown">--:--</span>
                <?php
                    echo '<br />NOW:'.time().'<br>+5 minutes: '.time()+300;
                ?>
                <br />
                What i want is: 00:04:59
            </div>
        </div>      
    </body>
</html>

结果： https://i.stack.imgur.com/oNBND.png

如果您给出“+5 分钟”，即 time() 函数的总和 + 300 秒（5 分钟），例如，您将得到现在的日期 + 未来的 5 分钟，但在时间戳中.这里的目的是脚本计数 00:05:00 现在开始 time()。

Answer 1

仔细看这一行：

var duration = moment.duration(1646486515 * 1000, 'milliseconds');

1646486515秒有多少分钟？远远超过五个！事实上，它已经超过 52 年，但是当您格式化它时，您不会显示年、月和日，只显示剩余的小时、分钟和秒。

这是因为 time() 返回给您 时间点 的表示，基于自 1970 年 1 月 1 日午夜 UTC 以来经过的秒数。

为了得到那个时间点和另一个时间点之间的持续时间，你需要比较它们。最简单的方法是从一个中减去另一个。例如，1646486815 - 1646486515 给你 300，表示这两个时间点之间的持续时间为 300 秒。

在你的例子中，你知道持续时间是 300 秒，所以可以这样写：

var duration = moment.duration(300 * 1000, 'milliseconds');

或者更简单地说：

var duration = moment.duration(300, 'seconds');

第二个问题在这一行：

$('#time').text(moment(duration.asMilliseconds()).format('h:mm:ss'));

在这里，我们取一个duration，并用它来创建一个“时刻”，即一个特定的时间点；但是什么时间点，为什么？我们真正想要的是格式化它，因为持续时间类型没有format方法，但是它有获取小时、分钟和秒的方法，所以我们可以自己写：

var duration = moment.duration(300, 'seconds');
formattedDuration = duration.hours() + ':' + String(duration.minutes()).padStart(2, '0') + ':' + String(duration.seconds()).padStart(2, '0');
$('#time').text(formattedDuration);

这里的关键是依次查看每个部分，在我们开始工作之前不要试图将各个部分组合在一起。一旦我们知道我们可以根据秒数创建一个持续时间，并格式化该持续时间，我们就可以添加 PHP 来决定从多少秒开始。一旦我们完成了这项工作，我们就可以添加对持续时间进行倒计时的部分，然后添加在它达到零时执行额外操作的部分。

Answer 2

我最终用另一个想法解决了我的问题。也许如果您正在寻找答案，这会对您有所帮助。

首先，如果您使用 PHP 的函数“time()”加上 + 5 分钟，请使用此函数转换为日期时间字符串：

date('Y-m-d H:m:s', $row['time_stamp'])

有了这个，结果是一个格式化的日期：2022-03-05 12:00:00（已经包含 5 分钟）。

然后，从这里下载脚本：http://hilios.github.io/jQuery.countdown/documentation.html安装后，使用文档脚本并定义时区。

代码最终代码为：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
        <title>Hello, world!</title>
        <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js"></script>
    <script src="https://momentjs.com/downloads/moment-timezone.js"></script>
        <script type="text/javascript">
            var timesZone = moment.tz("<?php echo date('Y-m-d H:i:s',$get['time_zone']); ?>","America/Sao_Paulo");
            $("#timer").countdown(timesZone.toDate(), function(event) {
                $(this).text(event.strftime('%H:%M:%S'));
            });
        </script>
    </head>
    <body>
        <center><p><h1>Hello, world!</h1></p></center>
        <div class="container mb-2 my-2">
            <div class="p-3 shadow-sm">
                result of code: <span id="timer" class="countdown">--:--</span>
                <?php
                    $newTime = time()+300;
                    echo '<br />NOW:'.time().'<br>+5 minutes: '.$newTime.'<br />New time date: '. date('Y-m-d H:s:i',time());
                ?>
                <br />
                What i want is: 00:04:59
            </div>
        </div>      
    </body>
</html>

使用 time() PHP 和 moment.js 倒计时

Countdown with time() PHP and moment.js

javascript

php

momentjs