如何使用Javascript通过单击按钮来移动图像？
我需要在具有以下行为的HTML文档中编写javascript代码： 单击按钮时，图像开始移动（如果尚未移动），每秒向左移动一个像素。单击第二个按钮时，图像停止移动，并立即重新定位到其原始坐标 我让所有的东西都能工作，除了“开始”的“按钮”。现在，如果单击图像，图像每秒向左移动1像素。但是，我需要将该功能转移到名为“开始”的按钮 有人知道怎么做吗？ 谢谢 我的代码如下：如何使用Javascript通过单击按钮来移动图像？,javascript,html,function,timer,move,Javascript,Html,Function,Timer,Move,我需要在具有以下行为的HTML文档中编写javascript代码： 单击按钮时，图像开始移动（如果尚未移动），每秒向左移动一个像素。单击第二个按钮时，图像停止移动，并立即重新定位到其原始坐标 我让所有的东西都能工作，除了“开始”的“按钮”。现在，如果单击图像，图像每秒向左移动1像素。但是，我需要将该功能转移到名为“开始”的按钮 有人知道怎么做吗？ 谢谢 我的代码如下： <html><head> <script> var timerid = null;
<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>
var-timerid=null；
函数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）；
}否则{
清除间隔（timerid）；
timerid=null；
}
}
var button2=document.getElementById（'button2'）；
按钮2.onclick=重新加载页面；
函数重载页面（）{
window.location.reload（）；
}
}
开始
停止并重置
cat按钮1document.getElementById('button1').onclick=function(){
//--^^^^^^^^----here
if(timerid == null){
timerid = setInterval("move()", 10);
}else{
clearInterval(timerid);
timerid = null;
}
}
如果使用jQuery，事情会简单得多，它通过
.animate（）