Javascript 我如何在代码中添加一个按钮来定时更改某些内容？
我有一个JavaScript的工作交通灯，每次我按下按钮都会改变，我如何使它如此，如果我按下另一个按钮，它会自动定时改变颜色 我当前的代码如下：Javascript 我如何在代码中添加一个按钮来定时更改某些内容？,javascript,html,css,Javascript,Html,Css,我有一个JavaScript的工作交通灯，每次我按下按钮都会改变，我如何使它如此，如果我按下另一个按钮，它会自动定时改变颜色 我当前的代码如下： <!DOCTYPE html> <html> <head> <style> #black { background: black; padding: 20px; width: 150px; height: 450px; } #red { border-radius
<!DOCTYPE html>
<html>
<head>
<style>
#black {
background: black;
padding: 20px;
width: 150px;
height: 450px;
}
#red {
border-radius: 100px;
background: red;
width: 130px;
height: 130px;
position: relative;
top: 10px;
left: 10px;
}
#amber {
border-radius: 100px;
background: orange;
width: 130px;
height: 130px;
position: relative;
top: 20px;
left: 10px;
}
#green {
border-radius: 100px;
background: green;
width: 130px;
height: 130px;
position: relative;
top: 30px;
left: 10px;
}
</style>
</head>
<body>
<script>
var seq = [["red","grey","grey"],["red","orange","grey"],["grey","grey","green"],["grey","orange","grey"]];
var y = 0;
function lights() {
if (y < 4){
var current = seq[y];
var r = current[0];
var a = current[1];
var g = current[2];
document.getElementById("red").style.background= r;
document.getElementById("amber").style.background= a;
document.getElementById("green").style.background = g;
y++
} else {
y = 1
document.getElementById("red").style.background= "red";
document.getElementById("green").style.background= "grey";
document.getElementById("amber").style.background = "grey";
}
}
</script>
<div id="black">
<button onclick=lights()>Next cycle</button>
<div id="red"></div>
<div id="amber"></div>
<div id="green"></div>
</div>
</body>
</html>
#黑色的{
背景：黑色；
填充：20px；
宽度：150px；
高度：450px；
}
#红色的{
边界半径：100px；
背景：红色；
宽度：130px；
高度：130像素；
位置：相对位置；
顶部：10px；
左：10px；
}
#琥珀色{
边界半径：100px；
背景：橙色；
宽度：130px；
高度：130像素；
位置：相对位置；
顶部：20px；
左：10px；
}
#绿色的{
边界半径：100px；
背景：绿色；
宽度：130px；
高度：130像素；
位置：相对位置；
顶部：30px；
左：10px；
}
变量序列=[“红色”、“灰色”、“灰色”]、[“红色”、“橙色”、“灰色”]、[“灰色”、“灰色”、“绿色”]、[“灰色”、“橙色”、“灰色”]；
var y=0；
功能灯（）{
if（y<4）{
无功电流=序列[y]；
var r=当前[0]；
var a=电流[1]；
var g=电流[2]；
document.getElementById（“红色”）.style.background=r；
document.getElementById（“琥珀色”）.style.background=a；
document.getElementById（“绿色”）.style.background=g；
y++
}否则{
y=1
document.getElementById（“红色”）.style.background=“红色”；
document.getElementById（“绿色”）.style.background=“灰色”；
document.getElementById（“琥珀色”）.style.background=“灰色”；
}
}
下一周期
setTimeoutdoColorChangecolordoColorChange('green'); // set the color now
setTimeout(function () {doColorChange('yellow');}, 2000);
setTimeout(function () {doColorChange('red');}, 4000);
setTimeoutsetIntervaltoggleColorsetInterval(toggleColor, 2000);
（大约）每2秒调用一次。您好，请修改以下代码，希望对您有用。它不使用任何jQuery，只使用原始JS和HTML 红绿灯.js
// Initialize variables at runtime
var currentSignalState = null,
previousSignalState = null,
trafficLight,
signalChangeLoop;
// Fire the constructor when DOM is available
window.onload = function () {
trafficLight = document.getElementById("traffic-light");
construct();
};
// Constructor function definition
function construct(){
// Assign initial values for your signal states
currentSignalState = "green";
// Between Green and Red states is alwasy yellow so let's initialize it
previousSignalState = "yellow";
// When DOM is ready the paragraph can be found and we can then assign the initial value of the state
trafficLight.innerHTML = currentSignalState;
}
// Manually change the traffic light's value
function changeTrafficSignal(){
// Local variable representing the next state
var newSignalState = "";
// Between Green and Red is always Yellow
if(currentSignalState == "green" || currentSignalState == "red"){
newSignalState = "yellow";
// If state is Yellow and is coming from a Red state
} else if(currentSignalState == "yellow" && previousSignalState == "red" ){
newSignalState = "green";
// Will catch state Yellow coming from Green
} else{
newSignalState = "red";
}
// Update our global values to be used on next iteration
previousSignalState = currentSignalState;
currentSignalState = newSignalState;
trafficLight.innerHTML = newSignalState;
}
// Initiate an interval loop to change the traffic signal state
function startTrafficSignalAuto(){
// *Suggested: alter to pass a parameter and make the interval value dynamic
signalChangeLoop = setInterval(changeTrafficSignal, 2000);
}
// Stop the interval loop
function stopTrafficSignalAuto(){
clearInterval(signalChangeLoop);
}
<!-- Loads the Javascript and fires the constructor -->
<script src="traffic-light.js" type="text/javascript"></script>
<!-- Paragraph where the value of the current traffic light state is displayed-->
<p id="traffic-light"></p>
<!-- Will change the signal state based on current and previous signal states -->
<button onclick="changeTrafficSignal()">Manual Change</button>
<!-- Will initiate the interval to auto change || Sugested: supply a dynamic time by passing it as a parameter -->
<button onclick="startTrafficSignalAuto()">Automatic Start</button>
<!-- Will stop the interval loop -->
<button onclick="stopTrafficSignalAuto()">Automatic Stop</button>
人工更改
自动启动
自动停止