在HTML标签中回声变量

Question

我正在尝试使此标签从1-100开始。这样的东西。

<div style="width:variable%;">

，但我似乎无法删除它。我真的不太热衷于JS，但我在PHP中尝试了一些事情。

<div style="width:<?php 
for( $i=1; $i<=100; $i++ ) {
   ob_start();
   echo $i;
   ob_end_clean(); 
   if ($i === 100) {
      echo "100";
   }}
?>
%">

我尝试了

sleep();

在计数上的功能。我想坚持使用PHP，只是因为我对此更舒服，我想为银行添加一些知识，但是如果您还有其他某种方式解决此问题，我希望尝试一下！<<

ps。我不希望它在.5秒内从1-100起。它是用于装载条的，所以我希望它至少需要2或3秒。

好吧。让我详细说明自己想做的事情。

<div style="width:50%">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:50%">

我正在使用bootstrap，底部" style = width：50％"显示了它的加载量。因此，在这种情况下，它已加载50％。我需要它从0％增加到100％！请帮助！

更新：我现在已经意识到为什么这不起作用，现在知道为什么JS或CSS过渡是解决此问题的方法。

Answer 1

您将无法使用PHP执行此操作。要动态更新该DIV的样式，您需要合并JavaScript。

查看此示例：http：//jsfiddle.net/6h74c/3/

var start = new Date();
var maxTime = 8300;
var timeoutVal = Math.floor(maxTime/100);
animateUpdate();
function updateProgress(percentage) {
    $('#pbar_innerdiv').css("width", percentage + "%");
    $('#pbar_innertext').text(percentage + "%");
}
function animateUpdate() {
    var now = new Date();
    var timeDiff = now.getTime() - start.getTime();
    var perc = Math.round((timeDiff/maxTime)*10);
console.log(perc);
  if (perc <= 100) {
   updateProgress(perc);
   setTimeout(animateUpdate, timeoutVal);
  }
}

Answer 2

php在发送到浏览器之前在服务器上执行。当然，您可以使用Flush（）输出部分内容，但是您无法更改已经发送的任何内容。因此，即使您的代码可以工作，您仍然会得到

<div style="width:1234567890101112131415161718192021222324252627...99%">

这很可能不是您想要得到的;）

您可以使用JavaScript进行THI（无需加载如此简单的任务诸如jQuery之类的巨大库） - 或者您可以将JavaScript代码附加到使用PHP时修改文档末尾的加载栏的JavaScript代码。第一个方法不允许您根据任何真实数据（至少不容易）控制结果，其次是可能的，但非常丑陋且不有效的代码（因此在所有浏览器中可能不起作用）。所以：不要。

如果确实有一些负载是使用闪存（通常在此处完成）上传/加载/...或使用ajax调用（这是最复杂的方法）来确定确定的正确方法进度。

如果现实中没有加载，而只是动画，请使用JavaScript。

Answer 3

php不能为您执行此操作，因为它是所有服务器端代码。您必须在客户端上使用某些东西才能使其工作。如果要使用超级简单的JavaScript，则可以执行以下操作（但要知道这很丑陋，不应用作"真实"工作的示例）：

<div id="progress-bar">
<script type="text/javascript">
  var progressBerElement = document.getElementById('progress-bar');
  var currentWidth = -1;
  var INTERVAL = 3 * 1000 / 100; // 3 seconds with 100 updates = 30ms between updates
  function updateWidth() {
    progressBarElement.style.width = ++currentWidth + '%';
    if (currentWidth < 100) {
      setTimeout(updateWidth, INTERVAL);
    }
  }
  setTimeout(updateWidth, INTERVAL);
</script>

这也可以使用一些CSS3魔术（我不知道）来完成。

Answer 4

使用CSS 3动画。（可用于旧-IE）http://jsfiddle.net/dlefg/1/

<div style="animation: myAnimation 1s;"></div>

和

@keyframes myAnimation {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

当然，您应该提供供应商前缀（例如在小提琴中）。