Элементы 'div', движение, создание.
Здравствуйте.
Имеются две функции. Обе работают по таймеру. 1.
function UnitCr(){
var round = Math.round(Math.random() * 4);
new_unit=document.createElement('div');
new_unit.innerHTML='<img src="img/sq.png" />';
new_unit.setAttribute("style","left:"+_xhostile[round]+"px;top:0px;position:absolute;");
new_unit.setAttribute("id",count);
_units[count]=new_unit;
_xunits[count]=0;
new_input.appendChild(_units[count]);
count=count+1;
}
^ Создание Элемента ^ 2.
function UnitMov(){
for(i=0;i<=count;i++)
{ stick.value=i;
_xunits[i]=_xunits[i]+2;
_units[i].style.top=_xunits[i]+'px';
if(_xunits[i]>400){
//_units[i].style.top="0px";
//_units[i].style.display="none";
new_input.removeChild(_units[i]);<<< См. Сюда
_units[i]=_units[count];
_xunits[i]=_xunits[count];
count=count-1;
//var unitdel=_units[i];
//document.getElementById('hostile').removeChild();
/////neww_input._units[i].style.display="none";
}
}
}
^Движение элементов.^ После удаления элемента перестает работать функция движения элементов.:cray: Вот сижу не сплю, пытаюсь понять почему. |
Выложите тестовый пример с возможностью запуска [html run], экстрасенсы общаются на другом форуме
|
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<meta http-equiv="last-modified" content="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://l2gj.gev1.ru/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var _units=new Array();
var _xunits=new Array();
var _xhostile=new Array(0,40,80,120,160);
var count=0;
var stick;
var new_input;
var new_unit;
document.ready=function(){
stick = document.createElement("INPUT");
stick.setAttribute("value",count);
var new_put=document.getElementById('stick');
new_put.appendChild(stick);
}
function UnitMov(){
for(var i=0;i<=count;i++)
{ stick.value=i;
_xunits[i]=_xunits[i]+2;
_units[i].style.top=_xunits[i]+'px';
if(_xunits[i]>400){
//_units[i].style.top="0px";
//_units[i].style.display="none";
new_input.removeChild(_units[i]);
//new_input.removeChild(_units[i]);
_units[i]=_units[count];
_xunits[i]=_xunits[count];
count=count-1;
//var unitdel=_units[i];
/////neww_input._units[i].style.display="none";
}
}
}
function UnitCr(){
var round = Math.round(Math.random() * 4);
new_unit=document.createElement('div');
new_unit.innerHTML='<img src="http://l2gj.gev1.ru/img/sq.png" />';
new_unit.setAttribute("style","left:"+_xhostile[round]+"px;top:0px;position:absolute;");
new_unit.setAttribute("id",count);
_units[count]=new_unit;
_xunits[count]=0;
new_input=document.getElementById('hostile');
new_input.appendChild(_units[count]);
count=count+1;
}
var _unitmovetimer=setInterval(UnitMov, 10);
var _unitcrtimer=setInterval(UnitCr, 1000);
</script>
<style type="text/css">
body{background-color:#000000;}
.ground{border:1px solid #ffffff;margin: 1px auto;width:200px;height:400px;position:relative;}
#as{position: absolute; top: 320px; left: 160px; box-shadow: 1px 1px 5px #000000; }
#hostile{width:200px;height:400px;position:relative;}
#unit{background:url(http://l2gj.gev1.ru/img/sq.png);width:40px;height:40px;position:absolute;left:0px;right:0px;display:inline;}
#stick{border:1px solid #ffffff;margin: 1px auto;width:100px;height:50px;position:absolute;background-color:#ffffff;color:#000000;left:200px;top:0px;}
</style>
<body>
<div class="ground">
<div id="stick"></div>
<div id="hostile"></div>
</div>
</body></html>
|
В итоге-то, какой эффект должен получиться?
|
элементы которые заходят за поле(вниз) должны удалятся.
Массив в который записываются элементы должен изменятся, а именно последний элемент массива должен переместится на место удаленного элемента. И счетчик массива уменьшается на 1. Получается так что при удаление первого элемента, все остальные перестают двигаться. Т.е. цикл не работает. Почему так происходит я не пойму=(. |
Вот база, остальное прикрутите
<style>
.div {
position: absolute;
left: 100px;
width: 20px;
height: 20px;
border: solid 3px navy;
}
</style>
<body>
<script>
window.onload = function () {
function move () {
var elem = document.createElement('div');
elem.className = 'div';
elem.style.top = '0px';
document.body.appendChild(elem);
var int = setInterval(function () {
var top = parseInt(elem.style.top);
if (top > 200) {
clearInterval(int);
document.body.removeChild(elem);
} else {
elem.style.top = top + 1 + 'px';
}
}, 10)
}
setInterval(function () {move()}, 1000);
}
</script>
|
В принципе работает, но мне интересно почему цикл не пашет? Ведь все очевидно, блин... Ошибок же не выдает... |
_units[i]=_units[count]; что происходит в этот момент, что цикл вырубается. |
Mkaa,
А выведите в консоль count и =_units[count]; |
Deff, там ссылки на элементы, неувязка в том, что всё происходит не синхронно, так как новый элемент, ссылка на который добавляется в конец массива происходит раньше и ссылки на элементы, которые ещё не дошли до низа просто теряются, так как заменяются новыми
Mkaa, объясняйте подробнее конечный эффект, который должен получиться |
| Часовой пояс GMT +3, время: 11:03. |