需要带有 php 变量建议的 Javascript 代码

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

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

变量 $remaining 是存储完成时间的地方，目前这是进度条消失的地方，问题是每当您刷新页面时，进度条再次从 0% 开始（即使它更快，因为更多计时器已用完）。我希望它能够记住之前的 % 点并从该点继续加载。

额外信息

$item['start'] 存储在mysql中如：2014-10-17 12:45:25 和 $item['duration'] like: 1 代表 1 分钟，10 代表 10 分钟

编辑：仍未找到解决方案。

Answer 1

您可以通过添加以下结束标签来启动和停止 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 2

如下添加你的 PHP 变量

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

Answer 3

您只是告诉 javascript 还剩多少时间。你也可以解析开始时间，让 anim_progressbar 函数先计算百分比，然后再开始 this.each 循环。

排队

start: new Date(), // now

将开始时间放在()中，解析日期。

编辑：

据我所知...Javascript Date 对象会识别“开始”日期为有效并相应地对其进行解析...如果我错了请告诉我...

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

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