admin管理员组

文章数量:1327679

I tried to change div width every 1 second by 5px using JavaScript. How can I make this work?

Here's my code:

   <html>
        <head>
             <title>JS Functions</title>
        </head>
        <body>
        	<div style="width:100px; height:100px; background:gray" id="box" onclick="bigger()"></div>
            <script>
    
    function bigger()
    {
        var w = 100
        var h = 100
        while(w < 1000, h < 1000)
        {
            w = w+5;
            h = h+5;
            document.getElementById('box').style.width = w
            document.getElementById('box').style.height = h
            setInterval();
        }
    }
            </script>
        </body>
    </html>

I tried to change div width every 1 second by 5px using JavaScript. How can I make this work?

Here's my code:

   <html>
        <head>
             <title>JS Functions</title>
        </head>
        <body>
        	<div style="width:100px; height:100px; background:gray" id="box" onclick="bigger()"></div>
            <script>
    
    function bigger()
    {
        var w = 100
        var h = 100
        while(w < 1000, h < 1000)
        {
            w = w+5;
            h = h+5;
            document.getElementById('box').style.width = w
            document.getElementById('box').style.height = h
            setInterval();
        }
    }
            </script>
        </body>
    </html>

  • javascript
Share Improve this question edited Dec 15, 2014 at 18:36 Jeff 4,14625 silver badges32 bronze badges asked Dec 15, 2014 at 18:25 Daniel MashrakiDaniel Mashraki 2623 silver badges11 bronze badges 3
  • Can clarify your question? You want it to change every 1 second by 5px in each direction? – Grice Commented Dec 15, 2014 at 18:30
  • Yes I want it to change every 1 second by 5px in each direction – Daniel Mashraki Commented Dec 15, 2014 at 18:33
  • Hint: You're changing it by 5 while you say you want to change it by 5px – Jonathan Commented Dec 15, 2014 at 18:37
Add a ment  | 

3 Answers 3

Reset to default 6

No while loop needed. You can just use setInterval:

var w = 100;
var h = 100;
var foo = setInterval(function () {
    if(w>1000) cancelInterval(foo)
    w = w + 5;
    h = h + 5;
    document.getElementById('box').style.width = w + 'px';
    document.getElementById('box').style.height = h + 'px';
}, 1000);
<div style="width:100px; height:100px; background:gray" id="box" onclick="bigger()"></div>

You need to use setInterval to call your code every second, so move it outside of the bigger() function. Also you need the full value for style, including the unit you're using.

try this

<html>
        <head>
             <title>JS Functions</title>
        </head>
        <body>
        	<div style="width:100px; height:100px; background:gray" id="box"></div>
            <script>
    
        var w = 100;
        var h = 100;
    function bigger()
    {
        if (w < 1000 && h < 1000) 
        {
            w = w+5;
            h = h+5;
            document.getElementById('box').style.width = w + 'px';
            document.getElementById('box').style.height = h + 'px';
            
        } else {
           clearInterval(int);
       }
    }
              var int = setInterval(bigger, 1000);
            </script>
        </body>
    </html>

Let's say you have a div wth id='boxToEnlarge'

The JSFiddle: http://jsfiddle/7qtb1u8e/1/

And this is the actual code:

function enlargeBox(){

 //get current size
 var currentWidth = document.getElementById('boxToEnlarge').offsetWidth;
 var currentHeight = document.getElementById('boxToEnlarge').offsetHeight;

 //add 5 more pixels to current size
 document.getElementById('boxToEnlarge').style.width = currentWidth + 5 +'px';
 document.getElementById('boxToEnlarge').style.height = currentHeight + 5 +'px';

}

//call the enlargeBox func every 1 sec (1000 milliseconds) 
setInterval(function(){enlargeBox()},1000);

We are reading the current size of the div we want to enlarge then we add 5px to that amount and apply it on it's width/height CSS properties.

We wrap the above in a function and using setInterval, we call that function once every n milliseconds, in this case 1000ms which equals 1 second

本文标签： javascriptChange div width every 1 second by 5pxStack Overflow

版权声明：本文标题：javascript - Change div width every 1 second by 5px - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742221807a2435494.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。