将秒输出更改为分钟和小时

Question

我在我的项目中设置了倒计时系统，用户按小时输入他们想要保留多长时间的内容。即1,2,3,4小时等。然后倒数计时器启动并在完成时通知它们。我在网上找到了一个非常好的，但它只是在剩下的秒数上给倒计时。我想知道是否有人知道如何操纵此代码来显示小时：剩余时间。

我已经尝试过w3schools，但是这不会起作用，因为这是实际给定的未来时间

        <!-- $_row["Time"] returns the number of hours hence must multiply by 3600 to get it in terms of seconds for this example to work -->
    <?php $remain= $_row["Time"] * 3600;  ?>



<script>
function countDown(secs,elem) {
    var element = document.getElementById(elem);
    element.innerHTML = "Time Remaining "+secs+" seconds";
    if(secs < 1) {
        clearTimeout(timer);
        element.innerHTML = '<h2>Your Time is up!</h2>';
        element.innerHTML += '<p>Please evacuate the parking space as soon as possible</p><br>';
        element.innerHTML += '<a href="Home.php">Return to Home</a>';
    }
    secs--;
    var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
}
</script>
<div id="status"></div>
<script>countDown(<?php echo $remain ?>,"status");</script>

Answer 1

继续我的评论......

“我在网上找到了一个非常好的人” - 不，你没有。事实上，你可能找到了可以想象的最糟糕的一个。把字符串传递给setTimeout？依靠setTimeout来说准确吗？ （提示：它不是，也没有指定）。最重要的是，“结束”条件甚至没有正确完成，因为它试图在设置之前清除超时...

尝试这样的事情。

function countDown(secs,elem) {
    var element = document.getElementById(elem);
    var targetTime = Date.now() + secs*1000;
    var timer;

    function formatTime(secs) {
        var hours = Math.floor(secs/3600);
        var minutes = Math.floor(secs/60)%60;
        var seconds = secs%60;
        var pad = function(n) {return n<10 ? "0"+n : n;};
        return hours+":"+pad(minutes)+":"+pad(seconds);
    }
    function tick() {
        var timeleft = Math.floor((targetTime - Date.now()) / 1000);
        element.innerHTML = "Time Remaining: "+formatTime(timeleft);
        if( timeleft < 0) {
            element.innerHTML = "Time up!";
            clearInterval(timer);
        }
   }

   timer = setInterval(tick, 200); // higher numbers are less precise
   tick(); // perform first update immediately
}

这使用实际时间来确保结束时间是应该的时间！

Answer 2

使用这样的代码

<script>
function secondsToHms(d) {
    d = Number(d);
    var h = Math.floor(d / 3600);
    var m = Math.floor(d % 3600 / 60);
    var s = Math.floor(d % 3600 % 60);

    var hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " hours, ") : "";
    var mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes, ") : "";
    var sDisplay = s > 0 ? s + (s == 1 ? " second" : " seconds") : "";
    return hDisplay + mDisplay + sDisplay; 
 }

function countDown(secs,elem) {
    var element = document.getElementById(elem);
    var h=secondsToHms(secs);
    element.innerHTML = "Time Remaining "+h;
    if(secs < 1) {
        clearTimeout(timer);
        element.innerHTML = '<h2>Your Time is up!</h2>';
        element.innerHTML += '<p>Please evacuate the parking space as soon as 
       possible</p><br>';
        element.innerHTML += '<a href="Home.php">Return to Home</a>';
    }
    secs--;
    var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
}
</script>

<div id="status"></div>
<script>countDown(10,"status");</script>