Форум

Astrey · #1 (**permalink**) 06.03.2013, 16:39

Хочу сделать вот что: Выпадающие меню - так, что бы каждая последующая строка появлялась через определенный интервал, но со стандартными методами setInterval, setTimeout не чего не вышло (возможно я не правильно подошел к решению задачи). Попробовал сделать так: бесконечный цикл обрывается через секунду работы, и по окончанию исчезает один элемент. Это работает только с одним элементом. Если сделать с большим числом элементов - компьютер зависает и исчезают сразу все строки. Вопрос: Возможно ли решить эту задачу стандартными методами (бес подключения библиотек), и главное как?

danik.js · #2 (**permalink**) 06.03.2013, 18:21

Конечно можно. HTML-код со стилями в студию. И ваш js-код, который вы сумели написать. Кстати вопрос - чем не устраивает jquery или иные библиотеки для анимации?

Astrey · #3 (**permalink**) 07.03.2013, 09:56

Устаревает. Но я хотел бы узнать - способен ли это сделать сам JS без библиотек.
Мой код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
</head>
<body onload="style_function()">
<table id="table00" border="3">
<tr>
<td onclick="height_function()"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<script type="text/javascript">

function style_function(){

sell = document.getElementById('table00').getElementsByTa gName("td");
for(i=0; i<sell.length; i++){

sell[i].style.width = '200px';
sell[i].style.height = '50px';

}

}

function height_function(){

sell = document.getElementById('table00').getElementsByTa gName("td");

var i = 0;
while(i<5){

var date00 = new Date();
var seconds = date00.getSeconds();

while(true){
var date01 = new Date();
if(seconds !== date01.getSeconds())break;
}

sell[i].style.display = "none";

i++;

}
}
</script>
</body>
</html>

danik.js · #4 (**permalink**) 07.03.2013, 10:56

Код отформатируйте.

Сообщение от Astrey

способен ли это сделать сам JS без библиотек

А библиотеки на чем пишут по вашему? На ассемблере чтоли? Просто зачем писать что-то, если это уже давно написано, оптимизировано и включено в готовую библиотеку? Если ради интереса - то помоему у вас слишком мало опыта с js чтобы таким заниматься.

Astrey · #5 (**permalink**) 07.03.2013, 23:28

Ну что же, должно быть вы праву. Не стоит выделываться

megaupload · #6 (**permalink**) 07.03.2013, 23:53

на, заебал http://habrahabr.ru/post/111658/

_SR_71_ · #7 (**permalink**) 08.03.2013, 14:35

Попытался решить вашу задачу

<style type="text/css">
    #table00 td {
      width: 200px;
      height: 50px;
    }
</style>
<script type="text/javascript">

  function height_function() {
    var sell = document.getElementById('table00').getElementsByTagName("td");
    var i = sell.length;
    
      setTimeout(function run() { sell[i].style.display = "none";
      var t = setTimeout(run, 1000);
      i--;
      if(i == 0)
        clearTimeout(t); }, 1000);
  }
  
</script>

</head>
<body>
<table id="table00" border="3">
<tr>
<td onclick="height_function()"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

</body>

Но возникает проблема, внутри setTimeout не видны элементы sell. Если кто знает в чем проблема, отпишитесь пожалуйста.

Deff · #8 (**permalink**) 08.03.2013, 15:07

Сообщение от _SR_71_

Но возникает проблема, внутри setTimeout не видны элементы sell.

setTimeout(function () {
   var run=function () { sell[i].style.display = "none";
      i--; if(i == 0) {clearTimeout(t); return;}
     var t = setTimeout(run, 1000);
  }
}, 1000);

Элемента с i=sell.length; - Нет

danik.js · #9 (**permalink**) 08.03.2013, 15:14

Сообщение от _SR_71_

Но возникает проблема, внутри setTimeout не видны элементы sell

Это не так. Просто должно быть:
var i = sell.length -1 ;

var t = setTimeout(run, 1000);
i--;
if(i == 0)
 clearTimeout(t);

Что? Сначала ставим таймер, потом начинаем думать, и если таймер не нужен - стираем? Может сразу начать думать (делать проверку) и не ставить таймер когда не надо?

И sell - тело продавать, а ячейки - это cells

Deff · #10 (**permalink**) 08.03.2013, 15:35

Ксать чот криво вообще построено, вроде так интересней:

<script type="text/javascript">

  function height_function() {
    var sell = document.getElementById('table00').getElementsByTagName("td");
    var i = sell.length;
    function run () {
        var tim0 = setTimeout(function () {
              i--; if(i == 0) {clearTimeout(tim0); return;}
             sell[i].style.display = "none";
         }, 1000);
         run ();
    }
}

</script>

Форум

Справочник

Discord чат

Курсы javascript