Самозаполняющийся statusbar
Помогите реализовать статус бар (самозаполняющийся)
function changeLine(curL,maxL,speedL,what)
{
var curWidth = maxL/curL * 100;
what.style.width = curWidth + '%';
//а здесь цикл пока curL <= maxL
//увиличиваем curL на speedL и меняем width
// timeOut 1 сек
}
какую \ какие функции нужно присобачить чтобы раз в 1 секунду ширина дива обновлялась.. Заранее спасибо |
setTimeout / setInterval
|
это я знаю. я не могу разобраться как с ними работать.
как им передавать параметр. этоже не задержка, а что-то другое, оно иначе работает. Если я просто цикл пропишу, то оно не будет работать как мне надо =\ |
это не статус бар, а прогресс бар. И что, он у тебя прогресс не отображает? Процесс сам по себе, прогресс бар сам по себе?
|
он либо ничего не делает (ошибка в коде?)
либо только 1 шаг из цикла, максимум делал сразу все, но висел, пока время выполнения цикла не кончится) |
(function() {
// тело цикла что здесь пишем то будет повторяцца // условие if(count == 100) // return false; оборвет цикл setTimeout(arguments.callee, 300) // эта хрень самая главная сама делает цикл })(); |
я имею, в виду, что непонятно, как этот прогресс бар работать должен. Он же показывает текущее состояние? Если да, то текущее состояние чего?
|
это полоска жизни в игре.
ей передаются 3 параметра (curHp,maxHp,speedHp) startProcent = curHp/ maxHp * 100; - какой базовое состояние прогресс бара Procent = speedHp/maxHp * 100; - сколько процентов идет в единицу времени mathround() везде на всяк хотелось бы довести дело до победного конца. Как организовать многозадачность? Ну чтобы при двойном вызове функции оно делала сразу 2 дела (управлялала двумя прогресс барами) |
тебе не нужна многозадачность
<div id="test"></div>
<script type="text/javascript">
f();
function f(){
runPeriodically( function(){
document.getElementById('test').innerHTML += '.';
}, 100, 10);
}
function runPeriodically( f, interval, times ){
var i = 0;
var id = setInterval(function(){
if( times &&
i == times-1 )
clearInterval( id );
f( i );
i++;
}, interval);
}
</script>
|
f() вызывает функцию.
функция f() вызывает функцию runperiodically а та в свою очередь выполняет то что ей передали параметром f. хм. я решил дело так, еще вчера.
<script>
//what = id дива у дива обрамки должно быть ид what_full а у дива вкладыша what
//curHp - текущее значение
//maxHp - максимальное значение
//speedHp - это сколько добавляется в единицу времени
function hey(what,curHp,maxHp,speedHp)
{
obj = document.getElementById(what);
objf = document.getElementById(what+'_full');
var curPro = curHp / maxHp * 100;
var Pro = speedHp / maxHp * 100;
var count=Math.round(curPro);
(function() {
count = count + Math.round(Pro);
obj.style.width = count + '%';
if(count >= 100)
{
obj.style.width = '100%';
curHp = maxHp;
objf.title = maxHp + '/' + maxHp;
return false;
}
else
{
curHp = curHp + speedHp;
objf.title = curHp + '/' + maxHp;
obj.style.width = count + '%';
}
setTimeout(arguments.callee, 5000)
})();
}
</script>
<body onLoad="hey('myhp2',11,37,3);">
<div id="myhp2_full" style="margin-top:200px;width:500px;height:4px;border:2px solid black;">
<div id="myhp2" style="width:50%;height:4px;background:green;"></div>
</div>
</body>
проблемы, кроме как онлоад я не могу вызвать функцию. но это не так уж и страшно. в моем варианте нельзя сделать сразу несколько таких штук. будет работать последняя. пс. как ты сделал возможность запустить твой код прямо здесь |
и в результате сложно понять, что там происходит, не понятно, зачем используются глобальные переменные
<script type="text/javascript">
function start( wrapper, bar, start, end, speed ){
var cur = start;
runPeriodically(function(){
$(wrapper).title = cur+'/'+end;
$(bar).style.width = cur/end*100+'%';
if( cur == end )
return false;
cur += speed;
if( cur > end )
cur = end;
}, 100)
}
function runPeriodically( f, interval ){
var i = 0;
var id = setInterval(function(){
var r = f( i );
if( r == false )
clearInterval( id );
i++;
}, interval);
}
function $( el ){
return typeof el == 'string' ? document.getElementById(el) : el;
}
</script>
<body onLoad="start('myhp2_full', 'myhp2', 11, 37, 3);">
<div id="myhp2_full" style="width:500px;height:4px;border:2px solid black;">
<div id="myhp2" style="width:50%;height:4px;background:green;"></div>
</div>
</body>
а еще лучше так (причем css/javascript лучше вынести в отдельные файлы)
<style type="text/css">
.progress-bar {
width: 500px;
height: 4px;
border: 2px solid black;
}
.progress-bar-bar {
width: 50%;
height: 4px;
background: green;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript">
Function.implement({
runPeriodically: function( interval ){
var i = 0;
var id = function(){
var r = this( i );
if( r == false )
$clear( id );
i++;
}.periodical(interval, this);
}
});
</script>
<script type="text/javascript">
var ProgressBar = new Class({
initialize: function( el ){
this._el = $(el);
this._el.addClass('progress-bar');
this._bar = new Element('div', {'class': 'progress-bar-bar'});
this._bar.inject(this._el);
},
start: function( start, end, speed ){
var cur = start;
f.bind(this).runPeriodically(300);
function f(){
this._el.title = cur+'/'+end;
this._bar.style.width = cur/end*100+'%';
if( cur == end )
return false;
cur += speed;
if( cur > end )
cur = end;
}
}
});
</script>
<body>
<div id="progress-bar-1"></div>
<script type="text/javascript">new ProgressBar('progress-bar-1').start(11, 37, 3);</script>
<div id="progress-bar-2"></div>
<script type="text/javascript">new ProgressBar('progress-bar-2').start(1, 37, 1);</script>
</body>
|
Цитата:
|
дя, я уже прочитал про html run.
спасибо, просто мой уровень весьма низок и я стараюсь писать как умею) В чем смысл вынесение отдельной функции runPeriodically? Чтобы меньше с setInterval возьни было? |
Цитата:
|
| Часовой пояс GMT +3, время: 00:15. |