在HTML標記中迴應變量

-3

我試圖讓這個標籤從1-100開始。像這樣的東西。在HTML標記中迴應變量

<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。我不希望它在0.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轉換是解決這個問題的方法。

來源

2014-02-07 jadeallencook

你確實意識到PHP在** SERVER **上執行？當這段代碼生成的html實際到達客戶端並被解析/呈現時，到服務器的連接將會結束並被關閉？你不能像這樣動畫HTML。你需要在客戶端使用JavaScript。 –

你會接受答案嗎？ – bjb568

@ bjb568我想但我仍然沒有解決我的問題。我試過你的CSS，但我無法使它工作。 – jadeallencook

您將無法使用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); 
    } 
}

來源

2014-02-07 01:31:16 Sirago

你不需要使用JS。使用CSS轉換。 – bjb568

確實如此，但我確定瀏覽器支持很重要：http://caniuse.com/css-transitions – Sirago

@ bjb568如果轉換應該具有靜態速度等，則可能。如果在運行時需要對動畫進行真正的控制，純CSS不是一種方法。 –

PHP在服務器上執行，在發送到瀏覽器之前。當然，您可以使用flush（）輸出部分內容，但是您無法更改已經發送的任何內容。所以，即使你的代碼會工作，你仍然可以得到

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

這是最有可能你想不是;）

你可以做使用Javascript THI（沒有必要加載如jQuery這樣的大型庫，用於這麼簡單的任務） - 或者您可以使用PHP附加在您的文檔末尾修改加載欄的JavaScript代碼。第一種方法不允許你根據任何真實數據來控制結果（至少不那麼容易），第二種方法可能但非常難看，而且不是有效的代碼（因此它可能不適用於所有瀏覽器）。所以：不要。

正確的方法來做到這一點，如果真的有加載的東西要麼使用Flash（通常在這裏完成）上傳/加載/ ...或使用AJAX調用（這是最複雜的方式）來確定進度。

如果在現實中沒有加載，它只是一個動畫，請使用Javascript。

來源

2014-02-07 01:29:26

是的，這就是我一直在得到的。我對JS並不感興趣，我只想知道PHP中是否有方法。 – jadeallencook

答案是：是的（請參閱我的編輯），它也涉及JS，再加上你不應該這樣做。 –

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魔術（我不知道）。

來源

2014-02-07 01:40:40 squid314

使用CSS 3動畫。（polyfills可用於舊IE）http://jsfiddle.net/dLEFG/1/

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

和

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

當然，你應該提供供應商前綴（像小提琴）。

來源

2014-02-07 01:42:42 bjb568

在HTML標記中迴應變量

回答

相關問題