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

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

Основная идея заключалась в том, чтобы сделать 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>

~~EDIT: теги производили HTML, пришлось изменить> к.~~

источник

2009-11-18 ehehhh

Я изменил код, и это отлично работает для меня

Заменить

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); 
     }

Working Demo

источник

2009-11-18 07:18:10 rahul

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

источник

2009-11-18 07:05:44 dlamblin

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

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

parseInt("011")  // 9 
parseInt("011", 10) // 11

источник

2009-11-18 07:06:27 nickf

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

Просто измените свой код так:

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

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

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

источник

2009-11-18 07:06:32

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

источник

2009-11-18 07:06:36 richardtallent

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

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

источник

2009-11-18 07:32:53

Спасибо всем за ваши ответы, я думаю, что я буду использовать jQuery :) – ehehhh

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

ответ

Смежные вопросы