2

次の動作を持つ HTML ドキュメント内に JavaScript コードを記述する必要があります。ボタンをクリックすると、画像が動き始めます (まだ動いていない場合)。2 番目のボタンをクリックすると、画像の移動が停止し、すぐに元の座標に再配置されます。

「START」と書かれた「ボタン」を除いて、すべてが機能します。現在、画像をクリックすると、画像は毎秒 1 ピクセル左に移動します。ただし、その機能を START というボタンに引き継ぐ必要があります。

誰もこれを行う方法を知っていますか? ありがとうございました！！

私のコードは次のとおりです。

<html><head>


<script>

var timerid = null;


function move()
{
document.getElementById('cat').style.right = 
    parseInt(document.getElementById('cat').style.right) + 1 + 'px';    
}

window.onload=function()
{   



document.getElementById('cat').onclick=function(){

    if(timerid == null){
        timerid = setInterval("move()", 10);
    }else{
        clearInterval(timerid);
        timerid = null;
    }
}   


var button2 = document.getElementById('button2');
button2.onclick= reloadPage;

    function reloadPage(){
        window.location.reload();
    }

}


</script>
</head>
<body>

<img id="cat" src="cat.jpg" style="position:absolute;right:5px"/>

<div>
<button id="button1" type="button" style="position:absolute;left:10px;top:190px"/>START</button>
<button id="button2" type="button" style="position:absolute;left:10px;top:220px"/>STOP & RESET</button>
</div>

</body>
</html>
4

1 に答える 1

1

catに変更button1 

document.getElementById('button1').onclick=function(){
                     //--^^^^^^^^----here
  if(timerid == null){
    timerid = setInterval("move()", 10);
  }else{
    clearInterval(timerid);
    timerid = null;
  }
}
于 2013-03-29T07:12:53.383 に答える