2

誰かがこれを手伝ってくれませんか。まずはコードを載せます。

HTML:

<div id="FirstChild" style=" background-color: red; width: 100px; height: 50px; margin: 5px;"></div>

JavaScript:

 window.onload = someThing;

 function someThing(){
    window.onclick = WidthChange;
 }


function WidthChange(){ 
    var presentWidth = parseInt(document.getElementById("FirstChild").style.width);
    document.getElementById("FirstChild").style.width = presentWidth + 1 +"px";
    setTimeout(WidthChange(), 3000);
}

ここで、ユーザーがウィンドウをクリックしたときに、3 秒ごとに div の幅を 1 ピクセルずつ増やしたいと考えています。私はこれが永遠に起こることを望んでいます。しかし、うまくいきません。ウィンドウをクリックすると、幅がすぐに広がります。jQuery animate() でそれを行う方法を知っていますが、それを使用したくありません。Javascriptのみでお願いします！

4

2 に答える 2

2

関数へのタイムアウト呼び出しを設定しているのではなく、その widthchange 関数の戻り値へのタイムアウト呼び出しを設定しているため、 with はすぐに増加します。に置き換えsetTimeout(WidthChange(), 3000);ますsetTimeout(WidthChange, 3000)。
あなたがそれに取り組んでいる間、これについて何かをすることも考えてください：

presentWidth + 1 +"px";

ここでは、int の加算と文字列の連結という 2 つのことを同時に行っています。最初に何をしたいのかを明確にしてください。

(presentWidth +1) +"px";

または、これを 2 つのステートメントに分けます。

最後に: 規則では、大文字で始まる関数は単なる関数/イベント ハンドラーではなく、コンストラクターであると規定されています。に変更WidthChangeすることwidthChangeもできますか？

更新と
の違いは非常に単純です。JS は、値に解決する必要がある式と見なします (数学のフラクチャのように)。式は関数を呼び出すため、その関数呼び出しの戻り値に解決できます。したがって、関数は 3000 ミリ秒後ではなく、すぐに呼び出されます。 括弧のないバージョンでは、最初の引数として setTimeout に渡される値は関数への参照であり、これ以上解決/単純化することはできません。その関数は、タイムアウトの期限が切れた後に呼び出されるものです。これが明確でない場合は、Google (および MDN をブックマーク) してください。setTimeout(WidthChange, 3000)setTimeout(WidthChange(), 3000)WidthChange()
setTimeoutsetTimeout MDN

于 2013-03-19T09:16:21.283 に答える
0

あなたのコードで-

  var presentWidth = parseInt(document.getElementById("FirstChild").style.width);

今度はsetTimeout-

setTimeout(function() { document.getElementById('FirstChild').style.width = (presentWidth+1)+"px" },
               3000);
于 2013-03-19T09:20:10.913 に答える