Mark Bell Mark Bell - 1 month ago 8
PHP Question

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

Answer

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>

Comments