javascript - 是否可以在托管网页的服务器上运行倒计时器？

Question

我正在为我的家庭自动化系统开发一个网页，它将控制我的花园洒水器。我已经有一个预定的计时器设置，现在我想添加一个倒计时器(打开 x 分钟)。

我希望能够关闭网页，并让计时器在后台继续运行。当计时器结束时，我希望它在达到零时立即执行某些操作，即使没有打开网页。

考虑到这一点，我对网页的有限了解告诉我计时器应该在服务器上运行(在我的例子中是 RPi 上的 Appache2)。我已经尝试过this基本示例，它在某些方面有效，但本身并不止于零。

我稍微修改了一下以显示这个问题:

<?php

session_start();

if (!isset($_SESSION['countdown'])) {

    $_SESSION['countdown'] = 10;

    $_SESSION['time_started'] = time();
}

$now = time();

$timeSince = $now - $_SESSION['time_started'];

$remainingSeconds = ($_SESSION['countdown'] - $timeSince);

echo "Time remaining: $remainingSeconds seconds";

if ($remainingSeconds < 1) {
    echo "DONE";
    session_destroy();
}

?>

启动脚本，网页显示“剩余时间:10秒”。完美的。 5秒后刷新，显示“剩余时间:5秒”。再次，完美。但是，如果我等待十秒并刷新，它会显示“剩余时间:-5 秒完成”。明确表明该脚本仅在页面刷新时运行，这当然是有道理的。

所以我正在寻找的是一个倒计时器:

• 在服务器上运行；
• 达到零时可以触发事件；
• 可以从 javascript 或 jQuery 启动、暂停、停止和读取。

我并不是在寻找任何特定语言的解决方案，只要它有效，我就很高兴。 PHP 示例只是我在研究我想要实现的目标的选项时偶然发现的。

这样的事情可能吗？

Answer 1

//here is the solution you can check   
<?php
if (isset($_POST['submit'])){
$time = $_POST['time'];
?>
< div id="countdown"></div>
<script type="text/javascript">
    var iTime = <?php echo $time; ?>;
    function countdown()
    {                
        var i = setInterval(function(){
            document.getElementById("countdown").innerHTML = iTime;
            if(iTime==0){
                alert('Countdown timer finished!');
                clearInterval(i);
            } else {
                iTime--;
            }                   
        },1000);                        
    }           
    countdown();
</script>
<?php
        } else {
       ?>
         <form name="test" method="post">
             Enter time: <input type="text" name="time" />
             <input type="submit" name="submit" value="Submit" />
          </form>        
      <?php
     }
        ?>