Javascript code with php variable advise needed

Question

I am using the script below to produce a progress bar to the track the progress of a timer. The timer runs for a certain time before it completes itself and deletes (it's for a browser based game where you build a building and eventually after a duration the construction is complete).

Please see code below:

$remaining=$item['start']+$item['duration']*60-time();
if ($remaining < 1) {
$remaining='0.1';
}
echo "<script type='text/javascript'>
var something = $remaining;
//<![CDATA[ 
$(function(){
$(document).ready(function(){
jQuery.fn.anim_progressbar = function (aOptions) {
 // def values
 var iCms = 1000;
 var iMms = 60 * iCms;
 var iHms = 3600 * iCms;
 var iDms = 24 * 3600 * iCms;
 // def options
 var aDefOpts = {
 start: new Date(), // now
 finish: new Date().setTime(new Date().getTime() + something * iCms), // now + 60 sec
 interval: 100
 }
 var aOpts = jQuery.extend(aDefOpts, aOptions);
 var vPb = this;
 // each progress bar
 return this.each(
 function() {
 var iDuration = aOpts.finish - aOpts.start;
 // calling original progressbar
 $(vPb).children('.pbar').progressbar();
 // looping process
 var vInterval = setInterval(
 function(){
 var iLeftMs = aOpts.finish - new Date(); // left time in MS
 var iElapsedMs = new Date() - aOpts.start, // elapsed time in MS
 iDays = parseInt(iLeftMs / iDms), // elapsed days
 iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // elapsed hours
 iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // elapsed minutes
 iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // elapsed seconds
 iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // percentages
 // display current positions and progress
 $(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>');
 $(vPb).children('.elapsed').html(iDays+' days '+iHours+'h:'+iMin+'m:'+iSec+'s</b>');
 $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');
 // in case of Finish
 if (iPerc >= 100) {
 clearInterval(vInterval);
 $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', 0+'%');
 $(vPb).children('.percent').html('<b>0%</b>');
 $(vPb).children('.elapsed').html('Building queue is empty. <div style= font-size:x-small; color:#000;>(<a href=# onclick=window.location.reload(true);>Reload?</a>)</div>');
 }
 } ,aOpts.interval
 );
 }
 );
}
// default mode
$('#progress1').anim_progressbar();
// from second #5 till 15
var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // now plus 5 secs
var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // now plus 15 secs
});
});//]]>";

The variable $remaining is where the time to completion is stored and currently this is what the progress bar goes off, the problem is whenever you refresh the page the progress bar starts from 0% again (even though it is faster because more of the timer has run down). I would want it so that it remembers the % point that it was at before and continue to load from that point.

EXTRA INFO

$item['start'] is stored in mysql like: 2014年10月17日 12:45:25 and $item['duration'] like: 1 for 1 min and 10 for 10 mins

EDIT: Solution still not found.

Answer 1

You can start and stop PHP as you like by adding opening an closing tags like:

some html;
<?php 
 do some php 
?>
some more html
<?php 
 do some php 
?>

So in your case:

$remaining=$item['start']+$item['duration']*60-time();
if ($remaining < 1) {
 $remaining='0.1';
 }
?> //STOP PHP HERE
<script type='text/javascript'>
var something = "<?php echo $remaining;?>"; //INSERT A LITTE PHP
//<![CDATA[ 
 ....
});
});//]]>; //REMOVE LAST QUOTE

Answer 2

Add Your PHP Variable as below

 echo "<script type='text/javascript'>
 var something = ".$remaining.";
 //<![CDATA[ ...";

Answer 3

You're only telling the javascript how much time is remaining. You might as well also parse the start time too and let the anim_progressbar function work out what the percentage is first, before you start the this.each loop.

in the line

start: new Date(), // now

put the start time in the (), and let the date be parsed.

EDIT:

As far as I'm aware... the Javascript Date object would recognise that "start" date as valid and parse it accordingly... let me know if I'm wrong...

EDIT2:

Provided you haven't changed your code (as per other suggestions):

$remaining=$item['start']+$item['duration']*60-time();
$startdate = $item['start']; // NEW VARIABLE
if ($remaining < 1) {
$remaining='0.1';
}
echo "<script type='text/javascript'>
var something = $remaining;
//<![CDATA[ 
$(function(){
$(document).ready(function(){
jQuery.fn.anim_progressbar = function (aOptions) {
 // def values
 var iCms = 1000;
 var iMms = 60 * iCms;
 var iHms = 3600 * iCms;
 var iDms = 24 * 3600 * iCms;
 // def options
 var aDefOpts = {
 start: new Date($startdate), // now // NEW VARIABLE
 finish: new Date().setTime(new Date().getTime() + something * iCms), // now + 60 sec
 interval: 100
 }
 var aOpts = jQuery.extend(aDefOpts, aOptions);
 var vPb = this;
 // each progress bar
 return this.each(
 function() {
 var iDuration = aOpts.finish - aOpts.start;
 // calling original progressbar
 $(vPb).children('.pbar').progressbar();
 // looping process
 var vInterval = setInterval(
 function(){
 var iLeftMs = aOpts.finish - new Date(); // left time in MS
 var iElapsedMs = new Date() - aOpts.start, // elapsed time in MS
 iDays = parseInt(iLeftMs / iDms), // elapsed days
 iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // elapsed hours
 iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // elapsed minutes
 iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // elapsed seconds
 iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // percentages
 // display current positions and progress
 $(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>');
 $(vPb).children('.elapsed').html(iDays+' days '+iHours+'h:'+iMin+'m:'+iSec+'s</b>');
 $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');
 // in case of Finish
 if (iPerc >= 100) {
 clearInterval(vInterval);
 $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', 0+'%');
 $(vPb).children('.percent').html('<b>0%</b>');
 $(vPb).children('.elapsed').html('Building queue is empty. <div style= font-size:x-small; color:#000;>(<a href=# onclick=window.location.reload(true);>Reload?</a>)</div>');
 }
 } ,aOpts.interval
 );
 }
 );
}
// default mode
$('#progress1').anim_progressbar();
// from second #5 till 15
var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // now plus 5 secs
var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // now plus 15 secs
});
});//]]>";

• Ben: I changed it to this: start: new Date(startdate), and added $startdate=$item['start']; as a variable further up but this results in the bar being 100% and full when it starts.. if that's what you meant.
• chris_eyekiller: so... in the PHP at the top $startdate = $item['start']; then -- start: new Date($startdate), // now
• Ben: Already defined it in the javascript as: var startdate = $startdate; but just tried start: new Date($startdate) and still the same thing.. get the time remaining showing like normal but the bar loads to 100% straight away.. maybe a problem with how $startdate is shown?
• Ben: RESPONSE TO EDIT2: That's exactly what I thought and have copied all the code into place but still getting the bar at 100% on start.. see image: postimg.org/image/mezpkxfvb strange..