Javascript 如何仅按一次按钮就将图像更改3次？_Javascript_Html_If Statement_Button

Javascript 如何仅按一次按钮就将图像更改3次？

javascript html if-statement button

Javascript 如何仅按一次按钮就将图像更改3次？,javascript,html,if-statement,button,Javascript,Html,If Statement,Button,必须按下按钮三次，图像才能更改三次。我怎样才能使按钮只按下一次，但它仍然会改变图像三次 <body> <h1>Traffic Light</h1> <br> <img id="myImage" src="Traffic_green.png" width="100" height="400"> <br> <button type="button" onclick="changeImage()">Traffic

必须按下按钮三次，图像才能更改三次。我怎样才能使按钮只按下一次，但它仍然会改变图像三次

<body>
 <h1>Traffic Light</h1>
<br>
 <img id="myImage" src="Traffic_green.png" width="100" height="400">
<br>
 <button type="button" onclick="changeImage()">Traffic light</button> //when clicked it runs function changeImage()
<br>
 <p>Click to make the traffic light work</p>
</body>


交通灯




红绿灯//单击时运行函数changeImage（）


单击以使交通灯工作

您可以在回调中使用此函数。。其中6是要运行的次数，1000是更改之间的延迟。。很明显，您可以根据自己的要求进行更改

函数更改3（）{
对于（i=0；i您可以在回调中使用此函数..其中6是要运行的次数，1000是更改之间的延迟..您可以根据需要更改它们

函数更改3（）{
对于（i=0；i您可以使用setTimeout
在1500ms（1.5秒）后循环浏览其他图像：


函数changeImage（）{
var lightDelay=1500；//灯光之间的延迟
var image=document.getElementById（'myImage'）；
if（image.src.match（“交通绿”））{
image.src=“Traffic\u red.png”；//将图像从绿色交通灯更改为红色交通灯
setTimeout（函数（）{
image.src=“Traffic\u yellow.png”；//将图像从红色交通灯更改为黄色交通灯
setTimeout（函数（）{
image.src=“Traffic\u green.png”；//将图像从红色交通灯更改为黄色交通灯
}，光延迟）
}，光延迟）
}
}
交通灯




红绿灯//单击时运行函数changeImage（）


单击以使交通灯工作
您可以使用设置超时
在1500毫秒（1.5秒）后循环浏览其他图像：


函数changeImage（）{
var lightDelay=1500；//灯光之间的延迟
var image=document.getElementById（'myImage'）；
if（image.src.match（“交通绿”））{
image.src=“Traffic\u red.png”；//将图像从绿色交通灯更改为红色交通灯
setTimeout（函数（）{
image.src=“Traffic\u yellow.png”；//将图像从红色交通灯更改为黄色交通灯
setTimeout（函数（）{
image.src=“Traffic\u green.png”；//将图像从红色交通灯更改为黄色交通灯
}，光延迟）
}，光延迟）
}
}
交通灯




红绿灯//单击时运行函数changeImage（）


单击以使交通灯工作
正如其他人提到的，您希望查看。如果您一直单击按钮，我也会使用此选项，以避免超时累积。请尝试以下操作：
<script>
  var timerId;
  function buttonClick() {
    var count = 0;

    // Cancel any currently running sequence
    if(timerId) {
      clearTimeout(timerId);
    }

    // Inner function to change after 3 secs and run again if needed
    function doChange() {
      timerId = setTimeout(function() {
        if(count++ < 3) {
          changeImage();
          doChange();
        }
      }, 3000);
    }

    // Start the sequence
    doChange();
  }

  function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("Traffic_green")) {
      image.src = "Traffic_red.png";  //changes image from green to red traffic light
    } else if (image.src.match("Traffic_red")) {
      image.src ="Traffic_yellow.png";  //changes image from red to yellow traffic light
    } else {
      image.src ="Traffic_green.png";  //changes image from red to yellow traffic light
    }
  } 
</script>


<body>
 <h1>Traffic Light</h1>
<br>
 <img id="myImage" src="Traffic_green.png" width="100" height="400" style="background-color: green">
<br>
 <button type="button" onclick="buttonClick()">Traffic light</button> //when clicked it runs function changeImage()
<br>
 <p>Click to make the traffic light work</p>
</body>


var-timerId；
函数按钮单击（）{
var计数=0；
//取消任何当前正在运行的序列
if（timerId）{
清除超时（timerId）；
}
//内部函数在3秒后更改，并在需要时再次运行
函数doChange（）{
timerId=setTimeout（函数（）{
如果（计数+++<3）{
changeImage（）；
doChange（）；
}
}, 3000);
}
//启动序列
doChange（）；
}
函数changeImage（）{
var image=document.getElementById（'myImage'）；
if（image.src.match（“交通绿”））{
image.src=“Traffic\u red.png”；//将图像从绿色交通灯更改为红色交通灯
}else if（image.src.match（“交通红色”））{
image.src=“Traffic\u yellow.png”；//将图像从红色交通灯更改为黄色交通灯
}否则{
image.src=“Traffic\u green.png”；//将图像从红色交通灯更改为黄色交通灯
}
} 
交通灯




红绿灯//单击时运行函数changeImage（）


单击以使交通灯工作
正如其他人提到的，您希望查看。如果您一直单击按钮，我也会使用此选项，以避免超时累积。请尝试以下操作：
<script>
  var timerId;
  function buttonClick() {
    var count = 0;

    // Cancel any currently running sequence
    if(timerId) {
      clearTimeout(timerId);
    }

    // Inner function to change after 3 secs and run again if needed
    function doChange() {
      timerId = setTimeout(function() {
        if(count++ < 3) {
          changeImage();
          doChange();
        }
      }, 3000);
    }

    // Start the sequence
    doChange();
  }

  function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("Traffic_green")) {
      image.src = "Traffic_red.png";  //changes image from green to red traffic light
    } else if (image.src.match("Traffic_red")) {
      image.src ="Traffic_yellow.png";  //changes image from red to yellow traffic light
    } else {
      image.src ="Traffic_green.png";  //changes image from red to yellow traffic light
    }
  } 
</script>


<body>
 <h1>Traffic Light</h1>
<br>
 <img id="myImage" src="Traffic_green.png" width="100" height="400" style="background-color: green">
<br>
 <button type="button" onclick="buttonClick()">Traffic light</button> //when clicked it runs function changeImage()
<br>
 <p>Click to make the traffic light work</p>
</body>


var-timerId；
函数按钮单击（）{
var计数=0；
//取消任何当前正在运行的序列
if（timerId）{
清除超时（timerId）；
}
//内部函数在3秒后更改，并在需要时再次运行
函数doChange（）{
timerId=setTimeout（函数（）{
如果（计数+++<3）{
changeImage（）；
doChange（）；
}
}, 3000);
}
//启动序列
doChange（）；
}
函数changeImage（）{
var image=document.getElementById（'myImage'）；
if（image.src.match（“交通绿”））{
image.src=“Traffic\u red.png”；//将图像从绿色交通灯更改为红色交通灯
}else if（image.src.match（“交通红色”））{
image.src=“Traffic\u yellow.png”；//将图像从红色交通灯更改为黄色交通灯
}否则{
image.src=“Traffic\u green.png”；//将图像从红色交通灯更改为黄色交通灯
}
} 
交通灯




红绿灯//单击时运行函数changeImage（）


单击以使交通灯工作