Javascript代碼與php變量建議需要

Question

我正在使用下面的腳本來產生一個進度條來跟蹤定時器的進度。定時器運行一段時間，然後完成自身並刪除（這是針對基於瀏覽器的遊戲，在此建立建築物並最終在建造完成後持續一段時間）。

請參見下面的代碼：

$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 

}); 
});//]]>"; 

其餘變量$是其中時間來完成存儲，目前這是進度條中有哪些了，問題是當你刷新頁面的進度條再次從0％開始（即使速度更快，因爲更多計時器已經耗盡）。我希望它能記住它之前的％點，並從這一點繼續加載。

EXTRA INFO

$項[ '開始']被存儲在MySQL，如：2014年10月17日12點45分25秒和 $ 項[ '持續時間']所示：1 1分鐘並10 10分鐘

編輯：解決方案仍未找到。

Answer 1

添加您的PHP變量如下

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

Answer 2

您可以啓動和停止PHP作爲您喜歡的添加打開一個結束標記，如：

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

所以你的情況：

$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 3

你只告訴javascript剩下多少時間。您也可以解析開始時間，然後在啓動this.each循環之前讓anim_progressbar函數計算出第一個百分比。

在該行

start: new Date(), // now 

把開始時間在（），並讓日期進行解析。

編輯：

據我所知... javascript日期對象將認識到，「開始」日期爲有效，並相應地解析它...讓我知道，如果我錯了.. 。

EDIT2：

前提是你有沒有改變你的代碼（按照其他建議）：

$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 

}); 
});//]]>";