Change seconds ouput to minutes and hours

Question

I have a countdown system set up in my project where a user enters by hours how long they want to reserve something for. i.e)1,2,3,4 hours etc. Then a countdown timer starts and notifies them when it is done. I found a really good one online however it is giving the countdown only in relation to seconds remaining. I am wondering if anyone knows how to manipulate this code to show hrs:minutes remaining.

I already tried the w3schools one however that won't work as that is in terms of an actual given future time

        <!-- $_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>

Use DateTime. Scroll down a little on this page, there's a highly voted answer to look at: https://stackoverflow.com/questions/8273804/convert-seconds-into-days-hours-minutes-and-seconds/19680778#19680778 — Russ J, Mar 02 '19 at 16:01
Hi @RussJ, that is a good idea however you loose the countdown functionality as that is just a static example — Rachel, Mar 02 '19 at 16:21
"I found a really good one online" - no you didn't. In fact you probably found the worst one imaginable. Passing a string to `setTimeout`? Relying on `setTimeout` to be precise? (hint: it's not nor is it ever specified to be). On top of that the "end" condition isn't even done right because it tries to clear the timeout *before* it gets set... — Niet the Dark Absol, Mar 02 '19 at 17:15

score 1 · Answer 1 · answered Mar 02 '19 at 17:22

Continuing from my comment...

"I found a really good one online" - no you didn't. In fact you probably found the worst one imaginable. Passing a string to setTimeout? Relying on setTimeout to be precise? (hint: it's not nor is it ever specified to be). On top of that the "end" condition isn't even done right because it tries to clear the timeout before it gets set...

Try something like this instead.

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
}

This uses actual timing to ensure the end time is when it's supposed to be!

bob_1982 · Answer 2 · 2019-03-02T18:38:19.420

0

use code like this

<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>

edited Mar 02 '19 at 18:38

answered Mar 02 '19 at 17:11

bob_1982

715
6
16

Thanks @bob_1982 but can I ask how should I pass the $_row["Time"] (the number of hours) into it? – Rachel Mar 02 '19 at 17:39
why you want to pass hours ? as in current code you are sending seconds and its being converted to hours,minutes and seconds – bob_1982 Mar 02 '19 at 17:55
Like when I enter this code in it does nothing as I am not passing any value into it. I need to be converting the result of – Rachel Mar 02 '19 at 18:04
it works for me . i edited and its now full working code – bob_1982 Mar 02 '19 at 18:36

Change seconds ouput to minutes and hours

2 Answers2