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只是因为我对它更加满意，而且我想向银行添加一些知识，但如果你有其他形式的解决方案，我很乐意尝试一下！ / p>

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。当然，你可以使用flush（）输出部分内容，但是你不能改变已经发送的任何内容。所以，即使你的代码可行，你仍然可以获得

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

很可能不是你想要的;）

你可以使用Javascript（没有必要为这样简单的任务加载像jquery这样的巨大库） - 或者你可以使用PHP附加修改文档末尾加载栏的javascript代码。第一种方法不允许您根据任何真实数据控制结果（至少不是那么容易），第二种方法是可能但非常丑陋且无效的代码（因此它可能不适用于所有浏览器）。所以：不要。

如果确实存在加载的东西是使用flash（通常在这里完成）来上传/加载/ ...或者使用AJAX调用（这是最复杂的方式）来确定进展。

如果现实中没有加载并且它只是一个动画，请使用Javascript。

Answer 2

您将无法使用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 3

PHP无法为您执行此操作，因为它是所有服务器端代码。您必须在客户端上使用某些东西才能使其正常工作。如果您想使用SUPER简单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动画。（polyfills可用于旧IE）http://jsfiddle.net/dLEFG/1/

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

和

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

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

回应HTML标记中的变量

4 个答案: