需要带有php变量advice的Javascript代码
Javascript code with php variable advise needed
我正在使用下面的脚本生成一个进度条来跟踪计时器的进度。计时器在完成并删除之前会运行一段时间(这是一款基于浏览器的游戏,你可以在游戏中建造一座建筑,并最终在一段时间后完成建造)。
请参阅以下代码:
$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[持续时间]类似:1分钟1个,10分钟10个
编辑:仍未找到解决方案。
您可以通过添加诸如之类的打开和关闭标记来随意启动和停止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
添加您的PHP变量如下
echo "<script type='text/javascript'>
var something = ".$remaining.";
//<![CDATA[ ...";
您只是告诉javascript还有多少时间。你也可以解析开始时间,让anim_progressbar函数在开始this.each循环之前先计算出百分比。
在线
start: new Date(), // now
将开始时间放在()中,然后解析日期。
编辑:
据我所知。。。Javascript Date对象会识别出"开始"日期是有效的,并相应地对其进行解析。。。如果我错了就告诉我。。。
第2版:
如果您没有更改代码(根据其他建议):
$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
});
});//]]>";
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 使用php或javascript从facebook相册URL中删除多余的部分
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在JavaScript中将字符串转换为函数引用
- 模糊事件的Javascript测试
- Javascript更改图标
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何使用WCF服务和javascript表单post上传.doc文件
- javascript结合了数组和字典
- 这是什么 ==- javascript 运算符
- 从javascript创建一个列表
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Javascript:selenium Web驱动程序isDisplayed()不工作
- 如何通过ajax刷新JSF填充的javascript变量
- 如何在Javascript中将JSon对象转换为数组
- Newbee JavaScript advice
- HTML+JavaScript GUI Advice
- 需要带有php变量advice的Javascript代码