Mark Bell Mark Bell - 2 months ago 12
jQuery Question

How to show the progress of a timer as a percentage

I have a maths problem that I can't work out. I am working in UNIX timestamps. I have the start time of a process, the end time of the process, now and the length of the given process in seconds. I would like to show a progress meter on my page that shows the percentage completed.

I have a function which displays a countdown timer that ticks every 1000ms. I would like to update the progress meter on every tick.

Can anyone help me with the formula to get the percentage completed, please?

TIA

// WE NEED TO PULL THE BED START TIME AND DURATION FROM THE DATABASE //
$bedMinQ = "SELECT bedId, sessionDate, minutesUsed FROM tanningHistory WHERE bedId = '".(int)$row->id."' ORDER BY id DESC LIMIT 1";
if($bedMinRes=$con->query($bedMinQ))
{
while($bedMinRow = $bedMinRes->fetch_object())
{
$minutesUsed = $bedMinRow->minutesUsed;
$sessionDate = $bedMinRow->sessionDate;
}
}
// GET THE TIME THAT THE SESSION STARTED //
${'timeStarted'.$row->id} = new DateTime($sessionDate);
// GET THE TIME THAT THE SESSION STARTED AND PLACE IN A VARIABLE THAT CAN BE EDITED INDEPENDENTLY //
${'timeStartedToEdit'.$row->id} = new DateTime($sessionDate);
// GET THE END TIME OF THE SESSION //
${'timeEnding'.$row->id} = ${'timeStartedToEdit'.$row->id}->modify('+'.$minutesUsed.' minutes');
// GET THE START TIME OF THE SESSION AS A TIMESTAMP //
${'stamp_start'.$row->id} = ${'timeStarted'.$row->id}->getTimestamp();
// GET THE END TIME OF THE SESSION AS A TIMESTAMP //
${'stamp_end'.$row->id} = ${'timeEnding'.$row->id}->getTimestamp();
$timeNow = new DateTime(date('Y-m-d H:i:s'));
$now = $timeNow->getTimestamp();
$duration = $minutesUsed*60;
// ${'timeStartedFormatted'.$row->id} = ${'timeStarted'.$row->id}->format('Y-m-d H:i:s');
// ${'timeEndingFormatted'.$row->id} = ${'timeEnding'.$row->id}->format('Y-m-d H:i:s');
echo "<span id='timeStarted".$row->id."' style='display: none' data-".$row->id."='".${'stamp_start'.$row->id}."'></span>";
echo "<span id='timeEnding".$row->id."' style='display:none' data-".$row->id."='".${'stamp_end'.$row->id}."'></span>";
echo "<span id='now' style='display:none'>".$now."</span>";
echo "<span id='duration' style='display:none'>".$duration."</span>";

<div class="dashboard-stat2 bordered">
<div class="display">
<div class="number">
<h3 class="font-blue-sharp">
<span data-counter="counterup" data-value="00.00" id="countdownBed<?php echo $row->id; ?>">00.00</span>
</h3>
<small><?php echo $row->bedName; ?></small>
</div>
<div class="icon">
<i class="fa fa-clock-o"></i>
</div>
</div>
<div class="progress-info">
<div class="progress">
<span id="progress<?php echo $row->id; ?>" style="width: 45%;" class="progress-bar progress-bar-success red-flamingo">
<span class="sr-only">45% grow</span>
</span>
</div>
<div class="status">
<div class="status-title"> grow </div>
<div class="status-number"> 45% </div>
</div>
</div>
</div>
// START ON THE TIMER FOR THE SUNBEDS //
var date_start = $('#timeStarted'+<?php echo $row->id; ?>).data('<?php echo $row->id; ?>') * 1000;
var date_end = $('#timeEnding'+<?php echo $row->id; ?>).data('<?php echo $row->id; ?>') * 1000;
var now = $('#now').text() * 1000;
var duration = $('#duration').text()*1000;
console.log(duration);
// then get the difference
var diff = date_end - now;
if(diff<0)
{
var sec = 0;
} else {
var sec = diff/1000;
}
countDownBed<?php echo $row->id; ?>(sec, $('#countdownBed'+<?php echo $row->id; ?>));

function countDownBed<?php echo $row->id; ?>(duration, element) {
var timer = duration, minutes, seconds;
var interval = 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);
var percent = (duration/interval)*100;
$('#progress'+<?php echo $row->id ?>).css('width', percent+'%');
if (--timer < 0) clearInterval(interval);
}, 1000);
}

Answer

Try:

var percentComplete = 100;
if(Date.now() < date_end) {
    percentComplete = (Date.now() - date_start) / (date_end - date_start) * 100;
}