Question

我试图在用户单击“开始”按钮时移动图像，然后该按钮变为“停止”按钮。起初我有2个按钮，但希望它只是一个按钮。

这就是我现在所拥有的。

HTML

<div><img id="myImage" src="car.gif" /></div>
<input type="button" value="Start" onclick="startStop()" id="startButton">
<input type="button" value="Stop" onclick="stop()">

的JavaScript

function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}

function startStop(){
moveRight();
change();
}

function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,50); 
}

function change(){
var elem = document.getElementById("startButton");
if (elem.value=="Stop") elem.value = "Start";
else elem.value = "Stop";
}

function stop(){
clearTimeout(animate);
}

window.onload =init;

当我点击实际的“停止”按钮时，它会停止图像在其轨道上停止运行，当我单击“启动”时，它将恢复我想要在一个按钮中执行的操作。另外，如果图像从右侧退出，我将如何制作，它会从左侧重新进入？

我试图在clearTimeout(animate);之间添加function change()，但只是让按钮消失了。有什么想法吗？

Answer 1

为同一元素上的click事件绑定2 eventListeners ，并在另一个元素被触发时删除一个。

试试这个，它只是一个演示代码

Html：

<input type="button" id="mixBut" value="Start" />

javaScript：

var mixBut = document.getElementById("mixBut");

mixBut.addEventListener("click", Start);

function Start(){
    console.log("Started");
    mixBut.removeEventListener("click", Start);
    mixBut.addEventListener("click", Stop);
    mixBut.value = "Stop";
}

function Stop(){
    console.log("Stopped");
    mixBut.removeEventListener("click", Stop);
    mixBut.addEventListener("click", Start);
    mixBut.value = "Start";
}

jsFiddle

Answer 2

您需要声明一些全局变量以查看动画是否已启动，更新后的代码是，

<强> HTML

  <div><img id="myImage" src="http://www.imageurlhost.com/images/8z26s5wwt04ersuf3wnj.jpg" /></div>
    <input type="button" value="Start" onclick="javaScript:startStopImg()" id="startButton">

<强>的JavaScript

var imgObj;
var animate = null;
function init(){
    imgObj = document.getElementById('myImage');
    imgObj.style.position= 'relative';
    imgObj.style.left = '0px';
}

startStopImg = function(){
    if(animate != null){
        stop();
    } else {
        moveRight();
    }
   change();
}

function moveRight(){
imgObj.style.left = (parseInt(imgObj.style.left) + 10) + 'px';
animate = setTimeout(moveRight,50); 
}

change = function(){
var elem = document.getElementById("startButton");
if (elem.value=="Stop") elem.value = "Start";
else elem.value = "Stop";
}

stop = function(){
    clearTimeout(animate);
    animate = null;
}
window.onload = init();

DEMO

更新只需将方法更改移出startStopimg方法中的if-else，我在上面的代码中更新了相同的内容，更新了DEMO

如何在JavaScript中将单个按钮用作“开始”和“停止”按钮？

2 个答案: