6 timers, 1 page, separate countdowns.

[NoobLaPHP]

I have 6 timers all running of a php page ranging from 15seconds to 6minutes. However you need to refresh the page to watch it countdown. I would like to set these up to do it so they all run down without having to keep leaving the page bur it showing up a message when the timer runs out.

[Ch0cu3r]

Why is PHP handling the countdown? PHP should be used to set the initial time to countdown from. The rest should then be handled by javascript.

[NoobLaPHP]

It's running off a function. The function i am using is this

$left = $timer - time();

echo secondsCount($left);

 

$tim = time() + 15;

mysql_query("UPDATE table SET time='$tim' WHERE username='$username'");

function secondsCount($int) { if($int < 60) { $minutes = $int / 60; $seconds = $int % 60; $minutes = (int)$minutes; $seconds = (int)$seconds; if($seconds < 10) { $seconds = "0$seconds"; } $string = $seconds . "secs"; } elseif($int < 3600) { $minutes = $int / 60; $seconds = $int % 60; $minutes = (int)$minutes; $seconds = (int)$seconds; if($minutes < 10) { $minutes = "0$minutes"; } if($seconds < 10) { $seconds = "0$seconds"; } $string = $minutes . "mins " . $seconds . "secs"; } elseif($int > 86400) { $days = $int / 86400 % 7; $hours = $int / 3600 % 24; $minutes = $int % 3600 / 60; $seconds = $int % 3600 % 60; $days = (int)$days; $hours = (int)$hours; $minutes = (int)$minutes; $seconds = (int)$seconds; // if($hours < 10) { $hours = "0" . $hours . ""; } // if($minutes < 10) { $minutes = "0" . $minutes . ""; } if($seconds < 10) { $seconds = "0" . $seconds . ""; } $string = $days . "days " . $hours . "hrs "; } else { $hours = $int / 3600; $minutes = $int % 3600 / 60; $seconds = $int % 3600 % 60; $hours = (int)$hours; $minutes = (int)$minutes; $seconds = (int)$seconds; // if($hours < 10) { $hours = "0" . $hours . ""; } // if($minutes < 10) { $minutes = "0" . $minutes . ""; } if($seconds < 10) { $seconds = "0" . $seconds . ""; } $string = $hours . "hrs " . $minutes . "mins " . $seconds . "secs"; } return $string; }

i need the echo to automatically refresh for 6 different timers all shown on the same page.

[Psycho]

To expand on ch0cu3r's response, what you probably want to do is as follows:

 

On the PHP script that builds the page, have it 1) Set JavaScript variables for each timer specifying the end time and 2) Create an output div for each timer. Then, have a JavaScript function that runs repeatedly which will update the time left for each timer.

[Psycho]

Here's quick and dirty example. Note, the PHP code would be used to create the HTML output for each timer to include a 'friendly' display of when the event ends and a DIV for the countdown as well as the JavaScript array of the timer end times. You can modify the function formatTimeDiff() for however you want the output to be displayed.

 

http://jsfiddle.net/JYB6d/

Edited March 3, 2014 by Psycho

[NoobLaPHP]

timers[0] = "<? echo $timer1; ?>";

timers[1] = "<? echo $timer2; ?>";

timers[2] = "<? echo $timer3; ?>";

 

<div id='timer[0]'>15secs</div><br>

<div id='timer[1]'>45secs</div><br>

<div id='timer[2]'>02mins 15secs</div><br>

 

How would i go about using the current output i have with the secondsCount(); function?

[Psycho]

I assume you have a list of datetimes you are retrieving from the database, which should be in the format YYYY-MM-DD HH:MM:SS. You would iterate through those to create the JS array and the divs for the output.

 

 

$timersJsArray = "var timers = new Array();\n";
$timersDivOutput = '';
$i = 0;
while($row = mysql_fetch_assoc())
{
    $timersJsArray .= "timers[{$i}] = '{$row['endtime']}';\n";
    $dateDisplay = date('F j, Y, g:i:s a', $row['endtime']);
    $timersDivOutput = "Timer {$i}:<br>
        End Date/time: {$dateDisplay}
        <div id='timer[{$i}]'> </div><br>";
}

 

The output $timersJsArray within the JS block in the head of the document and $timersDivOutput wherever you want them to display on the page.

[NoobLaPHP]

I assume you have a list of datetimes you are retrieving from the database, which should be in the format YYYY-MM-DD HH:MM:SS. You would iterate through those to create the JS array and the divs for the output.

$timersJsArray = "var timers = new Array();\n";
$timersDivOutput = '';
$i = 0;
while($row = mysql_fetch_assoc())
{
    $timersJsArray .= "timers[{$i}] = '{$row['endtime']}';\n";
    $dateDisplay = date('F j, Y, g:i:s a', $row['endtime']);
    $timersDivOutput = "Timer {$i}:<br>
        End Date/time: {$dateDisplay}
        <div id='timer[{$i}]'> </div><br>";
}

The output $timersJsArray within the JS block in the head of the document and $timersDivOutput wherever you want them to display on the page.

No i am not using datetimes. I'm using $tim = time() + 15; which then gets turned into a load of numbers in the database. Then to get the outcome i need as $left = $timer - time(); echo secondsCount($left); then i use the secondsCount() function to give me the timer of 15secs.

[Psycho]

No i am not using datetimes. I'm using $tim = time() + 15; which then gets turned into a load of numbers in the database. Then to get the outcome i need as $left = $timer - time(); echo secondsCount($left); then i use the secondsCount() function to give me the timer of 15secs.

 

Well, you are doing it wrong. You should store date values as dates in the database and not a PHP timestamp. But, it doesn't matter, you can still translate those integers into a proper datetime string using the PHP date() function. I've already provided a fully working JavaScript example and followed it up with some sample PHP code to generate the necessary client-side markup. You need to stop thinking about using PHP to calculate the time left. You need to do that on the client-side if you want it to be real-time. All you need from teh server is the list of events and their end time. Then process into the necessary code for the output to the client.

[NoobLaPHP]

Well, you are doing it wrong. You should store date values as dates in the database and not a PHP timestamp. But, it doesn't matter, you can still translate those integers into a proper datetime string using the PHP date() function. I've already provided a fully working JavaScript example and followed it up with some sample PHP code to generate the necessary client-side markup. You need to stop thinking about using PHP to calculate the time left. You need to do that on the client-side if you want it to be real-time. All you need from teh server is the list of events and their end time. Then process into the necessary code for the output to the client.

Thank you for your help. One last question about the snippet you provided. How would i go about having it show as just 00:15. 

At the minute it shows as 0:0:15. Is it possible?

[NoobLaPHP]

Thank you for your help. One last question about the snippet you provided. How would i go about having it show as just 00:15. 

At the minute it shows as 0:0:15. Is it possible?

Figured it out. Sorry to seem like such a noob. I added 

if(minutes < 10) {  minutes = '0'+ minutes; }

if(seconds < 10) {  seconds = '0'+ seconds; }

[Psycho]

Thank you for your help. One last question about the snippet you provided. How would i go about having it show as just 00:15. 

At the minute it shows as 0:0:15. Is it possible?

 

As I stated previously

 

 

You can modify the function formatTimeDiff() for however you want the output to be displayed.

 

I made the function to output HOURS:MINUTES:SECONDS

 

If you want just minutes and seconds then use this:

 

function formatTimeDiff(diffVal)
{
    total_seconds = Math.round(diffVal / 1000);
    if(total_seconds < 1) { return "Complete"; }
    seconds = total_seconds % 60;
    total_seconds -= seconds;
    minutes = total_seconds/60;
    return minutes+':'+seconds;
}

[NoobLaPHP]

 

As I stated previously

 

 

 

I made the function to output HOURS:MINUTES:SECONDS

 

If you want just minutes and seconds then use this:

function formatTimeDiff(diffVal)
{
    total_seconds = Math.round(diffVal / 1000);
    if(total_seconds < 1) { return "Complete"; }
    seconds = total_seconds % 60;
    total_seconds -= seconds;
    minutes = total_seconds/60;
    return minutes+':'+seconds;
}

I'm completely lost in this. For some reason i keep losing 3 seconds but only in the auto countdown. The timer itself remembers the 15secs yet when it starts counting down it skips to 12

[Psycho]

Are you trying to create timers that only exist for 15 seconds?  I really have no idea what you are trying to accomplish, but if you are creating timers that only start when the page is called I'm guessing that the delay between when the PHP page is called and the HTML page finishes loading is part of (or all of) that 3 second delay.

 

Maybe you should explain EXACTLY what you are trying to accomplish