jquery countdown - specify start and end times?

I'm using the jquery_countdown script (http://keith-wood.name/countdownRef.html#since) in conjunction with PHP.  I'm trying to countdown three minutes from a time value I'm pulling from the database, but I can't figure out how to designate a countdown from a specified time...

So, my query returns:

    1316967265

And, assuming that the current time is <= 3 minutes, I want to initiate the countdown.  

So, if the current time is 1316967445, then the time starts at 3 minutes and counts down.
 
If the current time is 1316967385, the time starts at 2 minutes and counts down.
If the current time is 1316967565, the timer shows that time is up.
n00b0101Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Is it very simple.

Your php is returning a timestamp in seconds since Epoch (1/1/1970)

you just need to create a date from it

until : new Date(<?PHP echo $num ?>*1000)


Here are some calculations you may want

var now = new Date()
var then = new Date(num*1000);
var diff = then.getTime()-now.getTime();
var diffInSecs = parseInt(diff/1000);
var diffInMins = parseInt(diffInSecs/60)
0
 
Ray PaseurCommented:
This should help illustrate the moving parts.
http://www.laprbass.com/RAY_temp_noob.php
<?php // RAY_temp_noob.php
error_reporting(E_ALL);

// SEE http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27322730.html

// SET THE TIMER VALUES - THESE COULD COME FROM A DATA BASE
$startTime = 1316967265;
$otherTime = 1316967385;

// DETERMINE THE ELAPSED TIME
$lapseTime = $otherTime - $startTime;

// END OF PHP - DROP INTO HTML AND JAVASCRIPT
?>

<script type="text/javascript">
var interval = "";
var seconds  = <?php echo $lapseTime; ?>;

function startInterval()
{
    interval = window.setInterval("tTimer()",1000);
}

function stopInterval()
{
    window.clearInterval (interval);
    interval="";
}

function tTimer()
{
    document.lapseTime.tDisplay.value = seconds--;

    if (sekonds == -1)
    {
        stopInterval();
    }
}

</script>

<script>
document.write('<meta http-equiv=\"Refresh\" content=\"<?php echo $lapseTime; ?>;url=http://lmgtfy.com?q=jQuery+Timer\">');
</script>

<form name="lapseTime">
This page will search for a JQuery Timer in
<input readonly class="timerBox" size="1" type="text" name="tDisplay" value="">
<script>startInterval();</script>
seconds.
</form>
<br/>
<a href="http://lmgtfy.com?q=Jquery+Timer">Click here if you don't want to wait.</a>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Ray: Not sure what your comment has to do with the current issue ...
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
Ray PaseurCommented:
Hi, Michel.  Try running it.  It's not very sophisticated - it just shows a countdown timer in action.  When the timer expires, a new page is loaded via the meta-refresh.  

If a part of the question is, "How do I work with timestamps in PHP?"  -- this article may offer some help.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_201-Handling-date-and-time-in-PHP-and-MySQL.html

Best regards, ~Ray
0
 
Michel PlungjanIT ExpertCommented:
However the question was related to a jQuery counter

Actually I thin he wanted

var d = new Date(<?PHP echo $num ?>*1000)
var until = d.setMinutes(d.getMinutes()+3)

until : until
0
 
Eddie ShipmanConnect With a Mentor All-around developerCommented:
Here's some code I use showing how to use that countdown timer. This one counts down until midnight the next day but I modified to show how to set it to 3 min from a time pulled from your DB.
 var start   = new Date(/* time pulled from the DB*/); // Make sure you format it correctly (This is a javascript date)
 var yr      = start.getFullYear();
 var mon     = start.getMonth();
 var day     = start.getDate();
 var hour    = start.getHours();
 var minute  = start.getMinutes()+3;
 var EndTime = new Date(yr, mon, day, hour, minutes, 0, 0);
 $('#cdt').countdown({until: dealEndTime,
                      onTick: highlightLastMin,
                      description: "<span id='cd_desc'>Until this ends</span>",
                      layout:'<span class="countdown_amount">{hn}:{m10}{m1}:{s10}{s1}</span><br />{hl}:{ml}:{sl}&nbsp;&nbsp;<br />{desc}'

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Adding 3 minutes is

var start   = new Date(time_pulled_from_the_DB*1000); // Make sure you format it correctly (This is a javascript date)
start.setMinutes(start.getMinutes()+3)

as I already posted.

no need for
 var yr      = start.getFullYear();
 var mon     = start.getMonth();
 var day     = start.getDate();
 var hour    = start.getHours();
 var minute  = start.getMinutes()+3;
 var EndTime = new Date(yr, mon, day, hour, minutes, 0, 0);
0
 
n00b0101Author Commented:
I wound up going with a combination of the two!  Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.