我如何製作一個按鈕，每次按下紅綠燈時都會改變燈光？

-3

我需要我的代碼來改變燈光。每次按下按鈕，我都希望交通信號燈顯示紅色，然後紅色和黃色一起顯示，然後只顯示綠色，我希望每次按下按鈕時都重複此過程。我需要幫助。到目前爲止，我有這個代碼。我如何製作一個按鈕，每次按下紅綠燈時都會改變燈光？

<!DOCTYPE html> 
<html> 
<head> 
<title>Traffic Light</title> 
</head> 
<body> 

<h1>Traffic Light</h1> 
<p>Click the button for light to change.</p> 

<div 

style="width:100.5px;height:320px;border:3px solid #000;"> 

<button onclick=circle2.style.fill="yellow";><Change Lights 
<button onclick=circle1.style.fill="transparent";><Change Lights 
<button onclick=circle2.style.fill="transparent";><Change Lights 
<button onclick=circle3.style.fill="green";>Change Lights 
</button> 

<svg id="svg1" style="width: 3.5in; height: 1in"> 
<circle id="circle1" r="40" cx="50" cy="50" style="fill: red; stroke: black;  stroke-width: 2"/> 
</svg> 

<svg id="svg2" style="width: 3.5in; height: 1in"> 
<circle id="circle2" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/> 
</svg> 

<svg id="svg3"style="width: 3.5in; height: 1in"> 
<circle id="circle3" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/> 
</svg> 

</script> 
</div> 
</body> 
</html>

可以請你幫我找到感謝您對我的工作的解決方案。

來源

2016-05-23 blaire

你忘了展現你的JavaScript，雖然你*根本*包括收盤''標籤出於某種原因。你有什麼嘗試，你卡在哪裏？至於「* [幫助]找到[你]工作的解決方案*」 - 否：*你*提出解決方案，然後，當 - 或者如果 - 你有問題時，你可以回來問我們有關這些具體問題，展示了你的工作並解釋了問題，行爲和預期的行爲。 –

http://stackoverflow.com/questions/28634993/svg-animation-pattern-traffic-light –

只需創建單個svg並在點擊時更改圈子填充。 – jcubic

試試這個：

var circle = document.getElementById('circle'); 
 
var colors = ['red', 'yellow', 'green']; 
 
var index = 0; 
 
document.getElementById('traffic').onclick = function() { 
 
    index++; 
 
    if (index == colors.length) { 
 
    index = 0; 
 
    } 
 
    circle.style.fill = colors[index]; 
 
};

<button id="traffic">Change Lights</button> 
 

 
<svg id="svg" style="width: 3.5in; height: 1in"> 
 
<circle id="circle" r="40" cx="50" cy="50" style="fill: red; stroke: black;  stroke-width: 2"/> 
 
</svg>

來源

2016-05-23 14:00:48 jcubic

這段代碼真的很不錯，但我需要三個圈子做這個感謝你的幫助。 – blaire

試試這個

<p>Click the button for light to change.</p> 
 

 
<div 
 

 
style="width:100.5px;height:420px;border:3px solid #000;"> 
 

 
<button onclick='circle2.style.fill="yellow"'>Change Lights</button> 
 
<button onclick='circle1.style.fill="transparent"'>Change Lights</button> 
 
<button onclick='circle2.style.fill="transparent"'>Change Lights</button> 
 
<button onclick='circle3.style.fill="green"'>Change Lights</button> 
 

 
<svg id="svg1" style="width: 3.5in; height: 1in"> 
 
<circle id="circle1" r="40" cx="50" cy="50" style="fill: red; stroke: black;  stroke-width: 2"/> 
 
</svg> 
 

 
<svg id="svg2" style="width: 3.5in; height: 1in"> 
 
<circle id="circle2" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/> 
 
</svg> 
 

 
<svg id="svg3"style="width: 3.5in; height: 1in"> 
 
<circle id="circle3" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/> 
 
</svg> 
 

 
</div>

來源

2016-05-23 14:02:56

謝謝你的回答，但我需要這個過程繼續下去，我只需要用一個按鈕就可以做到這一點。 – blaire

我如何製作一個按鈕，每次按下紅綠燈時都會改變燈光？

回答

相關問題