JavaScript subtraction problem_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-11 23:30 出处：网络

I thought I\'d write a simple script to animate my webpage a little. The basic idea was to make a div grow bigger and smaller, when I push a button. I handled the growing part well, but I can\'t get

I thought I'd write a simple script to animate my webpage a little.

The basic idea was to make a div grow bigger and smaller, when I push a button. I handled the growing part well, but I can't get it to shrink again.

It would seem, after long debugging, that the subtraction in JavaScript just isn't working. Basically, it seems, that this line isn't working: i = height - 4;, the value i stays the same.

I'm including a complete example, could you help me fix it?

<!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" />
        <met开发者_开发知识库a 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: tags were producing HTML, had to change > to .~~

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

This is probably not the problem, but you should always specify the base when using parseInt. It will interpret strings as base 8 if they start with 0

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

It appears from your code, that once the DIV reaches the maximum height, "increasing" is set to false, but you don't call pause() again, so testFunction() never actually fires with "increasing" set to false.

Your problem is that when you do increasing=false; you don't call pause(30) again.

Just change your code like this :

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

this will work, I tested it :)

Edit: As stated by dlamblin, these kind of thing are easily done using JQuery, if your goal is the animation itself and not "how" it works, you should consider JQuery.

I have changed your code and this works fine for me

Replace

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

with

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

and

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

with

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

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

with

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

Working Demo

It honestly looks fine, but you'd get better milage out of learning to use jQuery to do this. (press run).

You can also combine the IF loop and ELSE loop. Use:
i = height + (increasing) ? 4 : -4;
and then later on: `if (height<105 || height>303) increasing = !increasing;'

This way if you change a parameter, such as rate, then you only need to change it once.
--Dave