Повторение переменных в теге 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. Я не хочу, чтобы он шел от 1-100 в .5 секунд. Это для загрузочной панели, поэтому я бы хотел, чтобы она занимала, по крайней мере, 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, а нижний «стиль = ширина: 50%» показывает, насколько он загружен. Таким образом, в этом случае он загружается на 50%. Мне нужно, чтобы он шел от 0% до 100%! Пожалуйста помоги!

UPDATE: Теперь я понял, почему это не сработает, и теперь знаете, почему переходы 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 (нет необходимости загружать такие огромные библиотеки, как jQuery для такой простой задачи) - или вы можете добавить javascript-код, который изменяет панель загрузки в конце вашего документа с помощью PHP. Метод FIrst не позволяет вам управлять результатом в зависимости от любых реальных данных (по крайней мере, не так легко), второй возможен, но очень уродливый и недействительный код (поэтому он может не работать во всех браузерах). Итак: не надо.

Правильный способ сделать это, если действительно есть что-то, что загружает, либо использовать флэш-память (что обычно делается здесь) для загрузки/загрузки/... или использовать вызовы AJAX (что является самым сложным способом) для определить прогресс.

Если на самом деле нет загрузки, и это просто анимация, используйте Javascript.

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%; 
    } 
} 

Конечно, вы должны предоставить префиксы (например, в скрипку).