如何使单个按钮在JavaScript中充当开始和停止按钮？

当用户单击开始按钮时，我试图使图像移动，然后该按钮变为停止按钮。起初我有两个按钮，但希望它是一个单一的按钮

这就是我现在拥有的

Html

当我单击实际的停止按钮时，它会停止图像在其轨道上的运行，当我单击开始按钮时，它会恢复，我想在一个按钮中完成所有操作。还有，我如何使它在图像从右侧退出后，从左侧重新进入

我试图添加

clearTimeout（动画）函数change（）

之间执行code>，但这只会使按钮消失。有什么想法吗？

为

绑定两个事件监听器单击同一元素上的事件，并在触发另一个元素时删除其中一个

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

Html:

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

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";
}

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

HTML

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


更新
只需将方法更改移出startStopimg方法中的if-else，我已经在上面的代码中进行了更新，
更新的
看起来很棒！但是，当我第一次单击“开始”时，它会变为“停止”。然而，当你再次单击“停止”时，它不会变为“开始”，直到你再次单击它。您必须双击它才能更改。为什么?=/啊，我看到了变化，非常感谢！当我将代码复制到.js文件时，它没有运行，这是不是很奇怪？它可以在JSFIDLE上工作，但在我的计算机上运行html文件时似乎不起作用。
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";
}

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

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