Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Счетчик процентов. (https://javascript.ru/forum/jquery/27637-schetchik-procentov.html)

Feboll 19.04.2012 22:51

там просто имитация. процент зависит от ширины блока animate. из-за наложенного эффекта он меняется а радительные элементы нет. вот как-то так.

melky 19.04.2012 22:53

ну тогда и анимируйте его.

Feboll 19.04.2012 22:58

проценты... блок animate уже анимирован и работает. а вот проценты не работают((((

Denizz 19.04.2012 22:59

Вот посмотри в этой статье написано как можно создать прогресс бар с процентами: http://codomaza.com/script/progress-bar-na-javascript может решение пригодится...

Feboll 19.04.2012 23:12

Чет ниче не понял. но все равно спасибо. Может еще что подскажите? Просто хотело бы привязаться к имеющемуся скрипту( а не фигачить заново

Denizz 19.04.2012 23:54

Да там все просто - изначально проценты (prNum) равны 0, а потом изменяются на число, на которое и width увеличивается. Когда проценты больше 100, они возвращаются как 100% и функция останавливается.

Denizz 20.04.2012 00:02

var a = setInterval (function() {

	divRC.style.backgroundColor = '#F08080';
	prNum+= 6; // в prNum+=  в значение можно подставить любое целое число больше нуля
	pText.innerHTML = "Идет загрузка: "+prNum+" %";
	divRC.style.width = prNum+"px";

		if (prNum >=  100 ) {
			pText.innerHTML = "Загрузка завершена";
			divRC.style.width = 100+"px";
			clearInterval(a);
		}
	},500); // где 500 - это скорость анимации, можно увеличивать или уменьшать

Это функция с того сайта, а в вашем примере надо найти число, с которого анимируется ваш прогресс бар , короче вашу функцию надо глянуть внимательно, а то та строчка, что вы привели это конечный результат что-ли...

Feboll 20.04.2012 00:26

Вот HTML самого прогресс бара
div class="border1">
               <div class="border2">
                   <div id="animate">
                     
                   </div>
               </div>
           </div>

Вот CSS к нему
.border2 {position:absolute;
        height:43px;
	width:597px;
	border:#fbe999 1px solid;}
.border1 {position:absolute;
        background:#ffe264;
        top:87px;
        height:45px;
        left:220px;
	width:599px;
	border:#f3b717 1px solid;}
#animate {
	position:absolute; 
	background: repeat-x left url(../images/download.png); 
	height:43px;
	width:0px;
	font-size:40px;
	color:# 000;
	font-family:Arial, Helvetica, sans-serif;
}

А вот код который я использовал
$("#animate").animate({ 
            height: "43px", 
            width: "597px", 
        },
    $('#animate').text(($(this).width()/($(this).width()+5) * 100).toFixed(0) + '%');


И еще вопросик, как мне после этой загрузки заменить прогресс бар на какое нибудь сообщение?

Feboll 20.04.2012 03:34

Возник еще вопрос. как сделать так чтобы по окончанию анимации я через какое-то время перешол к скачиванию какого нить файла?
function second_passed() { location='Fireflight - Now .rar'; }
		setTimeout(second_passed, 7000)

такой код почему-то пытается открыть его а не скачать.


Часовой пояс GMT +3, время: 17:39.