CODEWITHSUNDEEP
phpjquery
Mark Bell
Mark Bell

Reputation: 11

Counting in jQuery

guys. I have a feature on my PHP app where I need to count-down (or up).

My clients will start a session that will run for a variable amount of time. I need to display the status of this session, in real-time (or close to) on the page.

For example, client one can start a session at 2016-10-04 12:50:00 and that session will run for nine minutes. I am pulling the start time and duration from the database but have hard-coded them here for ease of reading.

$timeStarted = new DateTime('2016-10-04 12:40:00'); //DYNAMIC

$timeEnding = $timeStarted->modify('+9 minutes'); // DYNAMIC

$timeStartedFormatted = $timeStarted->format('Y-m-d H:i:s');

$timeEndingFormatted = $timeEnding->format('Y-m-d H:i:s');

echo "<span id='timeStarted'>".$timeStartedFormatted."</span>";

echo "<span id='timeEnding'>".$timeEndingFormatted."</span>";

As you can see, I have saved the start time and end time in a span to be picked up by jQuery.

What I need to do is display a timer of this session on the page.

For example:

Session 1: 2/9 minutes. Which counts up as the minutes tick on and then stops at the end of the session.

Can anyone help me with this please?

Many thanks in advance, Mark

Upvotes: 0

Views: 61

Answers (1)

adeneo
adeneo

Reputation: 318202

Start by outputting something that is easier for javascript to read, like timestamps

$stamp_start = $timeStarted->getTimestamp();
$stamp_end   = $timeEnding->getTimestamp();

echo "<span id='timeStarted' data-time='".stamp_start."'>".$timeStartedFormatted."</span>";
echo "<span id='timeEnding' data-time='".$stamp_end."'>".$timeEndingFormatted."</span>";

Then get those values

var date_start = $('#timeStarted').data('time') * 1000; 
var date_end   = $('#timeEnding').data('time') * 1000; 

// then get the difference

var diff = date_end - data_start;

Then create a simple timer with setInterval

function countDown(duration, element) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        element.text(minutes + ":" + seconds);

        if (--timer < 0) timer = duration;
    }, 1000);
}

Full example below

// populate elements for demonstration in lack of a server with PHP here
    function pad(n) { return n < 10 ? '0'+n:n }
    function format(d) {
    	// Y-m-d H:i:s
        return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate())+' '+
        pad(d.getHours())+':'+pad(d.getMinutes())+':'+pad(d.getSeconds());
    }
    
	var date1 = new Date();
    var date2 = new Date();
    
    date2.setMinutes( date2.getMinutes() + 9 )
    
    $('#timeStarted').text(format(date1)).attr('data-time', date1.getTime()/1000);
    $('#timeEnding').text(format(date2)).attr('data-time', date2.getTime()/1000);
// -----------

function countDown(duration, element) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        element.text(minutes + ":" + seconds);

        if (--timer < 0) timer = duration;
    }, 1000);
}

var date_start = $('#timeStarted').data('time') * 1000; 
var date_end   = $('#timeEnding').data('time') * 1000; 

// then get the difference
var diff = date_end - date_start;
var sec  = diff/1000;
countDown(sec, $('#countdown'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='timeStarted' data-time=''></span><br />
<span id='timeEnding' data-time=''></span>
<br /><br />
<div id="countdown"></div>

Upvotes: 1

Related Questions