Question

我尝试使用JavaScript每隔1秒将div宽度改为5px。我怎样才能做到这一点？

这是我的代码：

＆＃13;

   <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>

＆＃13;

Answer 1

不需要循环。你可以使用setInterval：

＆＃13;

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

＆＃13;

<div style="width:100px; height:100px; background:gray" id="box" onclick="bigger()"></div>

＆＃13;

Answer 2

您需要使用setInterval每秒调用一次代码，因此将其移到bigger()函数之外。您还需要风格的全部价值，包括您正在使用的单位。

试试这个

＆＃13;

<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>

＆＃13;

Answer 3

让我们说你有一个id='boxToEnlarge'

JSFiddle ：http://jsfiddle.net/7qtb1u8e/1/

这是实际代码：

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

我们正在阅读我们想要放大的div的当前大小，然后我们将5px添加到该数量并将其应用于它的宽度/高度CSS属性。

我们将上面的内容包装在函数中并使用setInterval，我们每n毫秒调用一次该函数，在这种情况下1000ms，等于1秒

每隔1秒将div宽度改为5px

3 个答案: