Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Полоса жизни :)


Автор: R.M. 10.10.2005, 15:20
Скажите пожалуста, как сделать как во многих онлайн играх такая фигня есть - наверху полоска скажем 100 пикселей это твоя энергия (жизни, здоровье) если ты подрался и тебе нанесли урон эта полоса уменьшается, и например каждые 5 секунд восстанавливается 1 пиксель и так до 100%
Чтобы можно было задать время восстановления через переменную PHP

Автор: Sardar 10.10.2005, 16:49
Задача разбиваеться на три части:
  • отрисовка полоски
  • анимация
  • обмен инфой с сервером

Полоска это зачастую таблица с двумя ячейками, либо слой-контейнер с слоем-заливкой(float: left).

Анимация. Тут проблем нет, запустил таймер и пусть бежит.

Обмен инфой с сервером - вот тут много различных подходов, вопрос достоин отдельного топа, но перед этим пробегись по поиску, т.к. раз 5 на него отвечали точно.

Простейший пример сказанного:
Код
<style type="text/css">
#bar {
  position: relative;
  width: 100px;
  height: 10px;
  line-height: 10px;
  font-size: 10px;
  border: 1px solid black;
}

#fill {
  float: left;
  width: 70%;
  background-color: darkgreen;
}
</style>

<div id="bar"><div id="fill"></div></div>

<script type="text/javascript">
<!--
var o=document.getElementById('fill');
var p=70;
var tmr=window.setInterval(function() {
  o.style.width=(p++)+"%";
  if(p>=100) window.clearTimeout(tmr);
}, 1000);
//-->
</script>

Постарался написать так что бы не смог тупо copy/paste, попробуй подумать, обернуть самодельный прогрессбар в обьект с удобным интерфейсом smile smile

Автор: R.M. 10.10.2005, 17:39
Sardar

Цитата(Sardar @ 10.10.2005, 17:49)
Постарался написать так что бы не смог тупо copy/paste, попробуй подумать, обернуть самодельный прогрессбар в обьект с удобным интерфейсом smile smile

попробую smile smile

Автор: R.M. 10.10.2005, 18:13
Sardar

Попробовал так
Код

<style type="text/css">
#bar {
  position: relative;
  width: 100px;
  height: 10px;
  line-height: 10px;
  font-size: 10px;
  border: 1px solid black;
}
#fill {
  position: absolute;
  float: left;
  width: 70%;
  background-color: darkgreen;
}
</style>
<div id="bar" onLoad="javascript:progress()"><div id="fill"></div></div>
<script type="text/javascript">
finction progress(){
var o=document.getElementById('fill');
var p=70;
var tmr=window.setInterval(function() {
  o.style.width=(p++)+"%";
  if(p>=100) window.clearTimeout(tmr);
}, 1000);}
</script>

Наверно ты долго будиш смеяца над этим кодом, но я незнаю JS smile чево тока не пробовал, неполучаеца. Подскажи.... Кстати наскока я понимаю это не будет работать в мозилле?

Автор: Sardar 10.10.2005, 21:09
Цитата
Попробовал так

Это не уважение к участникам форума, всё чаще и чаще народ постит заведомо не рабочие скрипты с элементарными синтаксическими ошибками. С логикой могут быть проблемы, но ошибки синтаксиса тебе интерпретатор сразу скажет, вот и постарайся их убрать. Иначе выглядит как "я делаю вид что пробую, а вы напишите мне готовый код".

Второе: пиши на нормальном русском. Чем больше ты "корявишь", тем больше шансов что я удалю пост без обьяснений. Это не особый сленг и даже не феня, не позорься smile

В третьих что конкретно изменилось? Откуда событие onload у слоя? Что конкретно тебе не хватает для завершения задачи? Ведь базовый код есть, в принципе покрывающий две первые задачи из трёх, что я выше описал.

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



Автор: Aliance 10.10.2005, 22:07


Куксикус
пользуйся кнопкой код правильно!

Автор: butionok 11.10.2005, 19:11
Sardar

А разве может clearTimeout убить интервал установленный setInterval?

Твой код, который ты написал Куксикусу:
Код

var tmr=window.setInterval(function() {
  o.style.width=(p++)+"%";
  if(p>=100) window.clearTimeout(tmr);
}, 1000);


Так что...
Цитата(Sardar @ 10.10.2005, 21:09)
Это не уважение к участникам форума, всё чаще и чаще народ постит заведомо не рабочие скрипты с элементарными синтаксическими ошибками.


относится и к тебе smile

Автор: Sardar 11.10.2005, 19:16
Цитата(butionok @ 11.10.2005, 18:11)

А разве может clearTimeout убить интервал установленный setInterval?

butionok ну прежде чем говорить проверь, поставь alert, поищи по форуму что есть closures.

Кстати не нужно перегибать палку, ошибки логики это нормально, все ошибаемся. На форуме не допускаються скрипты, при старте которых браузер начинает материться на синтаксис, следоватльно участник скрипт не запускал.

Автор: Sardar 12.10.2005, 13:34
Цитата
В том то и дело что я непонимаю чего мне нужно для завершения задачи.

Ну и как мне по твоему помочь если ты сам не знаешь чего хочешь? smile Посмотрел что ещё нужно, полоса загрузки есть, да по сути всё есть. Не ясно только что тебе нужно.

Автор: butionok 13.10.2005, 22:28
Sardar

Да, и вправду работает. Извини. Я просто попробовал тот код который запостил Куксикус, а на msdn не написано, что clearTimeout может убить интервал установленный setInterval.

Автор: Sardar 14.10.2005, 12:34
Цитата(butionok @ 13.10.2005, 21:28)
не написано, что clearTimeout может убить интервал установленный setInterval.

Ой, это я не понял вопроса, я думал ты не врубился почему у меня доступ к tmr есть из вложенной функции smile
Ты прав, снимать интервал через clearTimeout не корректно, но работает, т.к. по моему везде используеться один механизм таймеров.

Автор: R.M. 17.10.2005, 00:09
Sardar

Ты не подскажеш как заставить заработать тот скрипт который ты дал? smile

Автор: diam 17.10.2005, 01:12
Цитата
Ты не подскажеш как заставить заработать тот скрипт который ты дал? smile

Куксикус, ну сколько можно спрашивать общие вещи? Ты уже достаточно давно на форуме, и наверняка уже читал его правила. Задавать нужно конкретные вопросы. Я готов помочь, если будет конкретика. Что именно не работает?

У Firefox/Mozilla есть JS console, в которой пишется, какие ошибки в скрипте. Таким образом отладка очень упрощается.

Так же полезно разбивать задачу на маленькие кусочки, с которыми проще разбираться.
Задавай конкретные вопросы, будешь получать ответы. Иначе можно идти в раздел http://forum.vingrad.ru/index.php?showforum=146.

P.S. Почитай http://forum.vingrad.ru/index.php?showtopic=62650, позволю себе процитировать слова chipset:
Цитата

Девелопить "законченные" программы требует большой воли или постоянного напора со стороны других smile
А отвечать на вопросы на форуме это продвигать свои знания без рутины smile

Автор: Sardar 17.10.2005, 01:29
Цитата
Ты не подскажеш как заставить заработать тот скрипт который ты дал?

Скопируй в .htm, сохрани, запусти. Работает? Да. Тогда что ты подразумеваешь под "заставить заработать"?

Автор: R.M. 17.10.2005, 02:04
Sardar

Я имею ввиду как сделать чтобы ширина возростала со временем, т.е. скажем если какаята переменная равна 5 то каждую секунду эта штука растёт на 5 пикселей или кадые 5 сек на 1 пиксель это не важно, вобщем в этом та и вся суть как сделать чтобы она заполнялась за время

Автор: Sardar 17.10.2005, 16:01
Цитата
Я имею ввиду как сделать чтобы ширина возростала со временем, т.е. скажем если какаята переменная равна 5 то каждую секунду эта штука растёт на 5 пикселей или кадые 5 сек на 1 пиксель это не важно, вобщем в этом та и вся суть как сделать чтобы она заполнялась за время

Ну подумай головой хоть немного? Разве тот код что я дал не заполняет полосу по времени? smile

Ты ждёшь готового решения, я бы дал, если бы знал что ты хочешь. Но если честно мне надоело, я хочу видеть здесь общество интелектуалов, решающих интересные задачи. Ты же за всё время только просишь готовый банальный код, который сам бы написал потрать два дня на мануал JS smile Xорошь паразитировать, либо с этого момента ты говоришь точно и ясно что хочешь, а также приводишь код или хотя бы описание алгоритма как ты это себе преставляешь на русском языке, так что бы было видно что ты хоть что нибудь догоняешь, либо я буду удалять "пустые" топы/посты.

Ну не верю что синтаксис JS сложен, ты ведь вроде на PHP пишешь, значит логикой наделён должен быть smile

Вот изначальный код:
Код
var o=document.getElementById('fill');
var p=70;
var tmr=window.setInterval(function() {
  o.style.width=(p++)+"%";
  if(p>=100) window.clearTimeout(tmr);
}, 1000);

Вот код с изменяемым шагом в пикселах, а не в процентах:
Код
var pstep=5;
var o=document.getElementById('fill');
var p=0;
var tmr=window.setInterval(function() {
  o.style.width=(++p*pstep)+"px";
  if(p*pstep>=o.parentNode.offsetWidth) window.clearTimeout(tmr);
}, 1000);

Тебе самому не стыдно? Согласен про offsetWidth ты мог не знать, значит именно это (как узнать ширину рамки) ты и должен был спросить!

В стили #bar добавь overflow: hidden, что бы заливка за рамку не убегала.

Автор: R.M. 18.10.2005, 08:07
Sardar

Спасибо, постараюсь не паразитировать smile

Цитата(Sardar @ 17.10.2005, 17:01)
Ну не верю что синтаксис JS сложен, ты ведь вроде на PHP пишешь, значит логикой наделён должен быть smile

Угу smile

Автор: R.M. 18.10.2005, 09:40
Цитата(Sardar @ 17.10.2005, 17:01)
Ну подумай головой хоть немного? Разве тот код что я дал не заполняет полосу по времени? smile

Нет smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)