строка состояния js.

Discussion in 'PHP' started by justonline, 2 Apr 2012.

  1. justonline

    justonline network ninja

    Joined:
    27 Jul 2011
    Messages:
    499
    Likes Received:
    60
    Reputations:
    53
    Делается запрос в бд, возвращается число. Так же есть максимальное значение.
    Надо сделать - некий прогресс бар, который будет показывать текущее состояние, с учетом того, что от нуля до полного заполнения проходит 10 минут. И в режиме реального времени показывает прогресс прошедшего времени
    хелп?
     
  2. Melfis

    Melfis Elder - Старейшина

    Joined:
    25 Apr 2011
    Messages:
    505
    Likes Received:
    105
    Reputations:
    53
    <div style="width: 100px; height: 10px; border: 1px solid black;">
    <div id="progress" style="height: 100%; background-color: red; width: 0px;"></div>
    </div>

    var progressContainer = document.getElementById('progress'),
    maxCount = 230,
    callback = function (serverData) {
    progressContainer.style.width = 100 / maxCount * serverData.value +'%';
    };
     
    #2 Melfis, 2 Apr 2012
    Last edited: 2 Apr 2012
  3. justonline

    justonline network ninja

    Joined:
    27 Jul 2011
    Messages:
    499
    Likes Received:
    60
    Reputations:
    53
    не пашед :)
     
  4. Melfis

    Melfis Elder - Старейшина

    Joined:
    25 Apr 2011
    Messages:
    505
    Likes Received:
    105
    Reputations:
    53
    HTML:
    <html>
    <head>
    <script>
    window.onload = init();
    
    var init = function () {
    	var maxValue = '<?php echo $maxValue; ?>',
    		currentTime = 0,
    		totalTime = 600,
    		timePeriod = 1,
    		mod = maxValue / totalTime,
    		progressbarContainer = document.getElementById('progress'),
    		updateProgressbar = function () {
    			var count = Math.round(mod * currentTime);
    			progressbarContainer.style.width = count / maxValue * 100 +'%';
    			progressbarContainer.innerHTML = count;
    			if (currentTime <= totalTime) {
    				currentTime += timePeriod;
    				return true;
    			}
    			// место под выполнение кода на завершение таймера
    			console.log('Готово');
    			clearInterval(timeInterval);
    		},
    		timeInterval = setInterval(updateProgressbar, timePeriod * 1000);
    }
    
    </script>
    </head>
    <body>
    <div style="width: 100px; height: 20px; border: 1px solid black;">
    	<div id="progress" style="height: 100%; background-color: red; width: 0px;"></div>
    </div>
    </body>
    </html>
    
    В личке уточнились детали, терь вроде должно работать как нужно.

    Зы. этот таймер не будет работать корректно, если у чела будут подвисания страницы. Можно переписать на машинное время клиента если потребуется.

    Зыы. а еще не мешало бы уменьшить кол-во сообщений в личке )
     
    #4 Melfis, 3 Apr 2012
    Last edited: 3 Apr 2012
    1 person likes this.
  5. justonline

    justonline network ninja

    Joined:
    27 Jul 2011
    Messages:
    499
    Likes Received:
    60
    Reputations:
    53
    да, 300 сообщений набрал0 спасибо, тестану :)\
     
    #5 justonline, 3 Apr 2012
    Last edited: 4 Apr 2012