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

How to make a single button act as a Start and Stop button in JavaScript?

提问by Md. Ashaduzzaman

I am trying to make an image move when the user click the Start button, and the button then becomes a Stop button. at first I had 2 buttons but want it to be a single button.

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

This is what I have right now.

这就是我现在所拥有的。

Html

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

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;

When I click the actual Stop button it stops the image dead on its tracks and when I click Start it resumes which I want to do all in one button. Also, How would I make it so after the image exits on the right, it re-enters from the left?

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

I was trying to add the clearTimeout(animate);between the function change()but that just made the buttons disappear. Any thoughts?

我试图在clearTimeout(animate);两者之间添加，function change()但这只会使按钮消失。有什么想法吗？

采纳答案by Umesh Aawte

All you need to declare some global variables to see if animation is started or not, The updated code is,

所有你需要声明一些全局变量来查看动画是否开始，更新的代码是，

HTML

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

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

演示

Update Just move the method change out of if-else in the startStopimg method, I have updated same in above code, Updated DEMO

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

回答by Md. Ashaduzzaman

Bind 2 eventListenersfor clickevent on the same element, and remove one when another is fired.

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

Try this, it's just a demo code

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

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

js小提琴