JavaScript вычитание проблема - PullRequest
Новая
       4

JavaScript вычитание проблема

0 голосов
/ 18 ноября 2009

Я думал, что напишу простой скрипт, чтобы немного оживить мою веб-страницу.

Основная идея состояла в том, чтобы сделать div больше и меньше, когда я нажимаю кнопку. Я хорошо справился с растущей частью, но я не могу заставить ее снова сжиматься.

Казалось бы, после долгой отладки вычитание в JavaScript просто не работает. Похоже, что эта строка не работает: i = height - 4;, значение i остается прежним.

Я привожу полный пример, не могли бы вы помочь мне это исправить? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Test</title>
        <meta http-equiv="Content-Language" content="Estonian" />
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
    </head>

    <body>
        <script type="text/javascript">
          var i;
          var increasing = new Boolean("true");
          var height;

          function testFunction() {
              height = parseInt(document.getElementById("testDiv").offsetHeight);
              if( increasing == true ) {
                  i = height + 4;
                  document.getElementById("testDiv").style.height = i + "px";
                  if( height >= 304 ) {
                      increasing = false;
                  }
                  else {
                      pause(30);
                  }
              }
              else {
                  i = height - 4;
                  document.getElementById("testDiv").style.height = i + "px";
                  if( height <= 104 ) {
                      increasing = true;
                  }
                  else {
                      pause(30);
                  }
              }
          }
          function pause(ms) {
              setTimeout("testFunction()", ms);
          } 
        </script>
        <button id="button" type="button" onclick="testFunction();">Do it!</button.
        <div id="testDiv" style="border: 2px solid black; width: 400px; height: 100px; text-align: center;">
           Hello!
        </div>
    </body>

</html>

РЕДАКТИРОВАТЬ: теги производили HTML, пришлось изменить> на.

Ответы [ 6 ]

1 голос
/ 18 ноября 2009

Из вашего кода видно, что, как только DIV достигает максимальной высоты, «Увеличивается» устанавливается в «Ложь», но вы больше не вызываете pause (), поэтому testFunction () фактически никогда не запускается, если «Увеличение» установлено в ложь.

1 голос
/ 18 ноября 2009

Ваша проблема в том, что когда вы делаете increasing=false;, вы больше не звоните pause(30).

Просто измените свой код следующим образом: 

if( height >= 304 ) { increasing = false; pause(30); }

это будет работать, я проверял :))

Edit: Как утверждает dlamblin, такого рода вещи легко сделать с помощью JQuery, если ваша цель - сама анимация, а не «как» она работает, вы должны рассмотреть JQuery.

1 голос
/ 18 ноября 2009 
height = parseInt(document.getElementById("testDiv").offsetHeight);

Вероятно, это не проблема, но вы всегда должны указывать базу при использовании parseInt. Он будет интерпретировать строки как основание 8, если они начинаются с 0 

parseInt("011")     // 9
parseInt("011", 10) // 11
0 голосов
/ 18 ноября 2009

Вы также можете объединить цикл IF и цикл ELSE. Использование:
i = height + (increasing) ? 4 : -4;
а затем позже: `if (высота <105 || высота> 303) увеличивается =! увеличивается; '

Таким образом, если вы меняете параметр, например, скорость, вам нужно изменить его только один раз.
--Dave

0 голосов
/ 18 ноября 2009

Я изменил твой код, и это прекрасно работает для меня

Заменить 

height = parseInt(document.getElementById("testDiv").offsetHeight);

с 

height = parseInt(document.getElementById("testDiv").style.height , 10);

и 

if( height >= 304 ) {
                increasing = false;
        }

с 

if( height >= 304 ) {
                increasing = false;
                pause(30);
        }

if( height <= 104 ) {
                increasing = true;
        }

с 

if( height <= 104 ) {
                increasing = true;
                pause(30);
        }

Рабочая демоверсия

0 голосов
/ 18 ноября 2009

Если честно, все выглядит хорошо, но вы научитесь лучше использовать jQuery для этого. (нажмите run).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...