<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
红绿灯切换
</title>
<style>
#main> .show{
display: flex;
flex-direction: row;
}
#main> .show> div{
height: 60px;
width: 60px;
background-color: lightgray;
margin-left: 10px;
border-radius: 30px;
}
</style>
</head>
<body>
<div id="main">
<div class="show">
<div id="red">
</div>
<div id="yellow">
</div>
<div id="green">
</div>
</div>
<div class="buttons">
<input type="button" id="red-button" value="红灯" onclick="switchColor('red')">
<input type="button" id="yellow-button" value="黄灯" onclick="switchColor('yellow')">
<input type="button" id="green-button" value="绿灯" onclick="switchColor('green')">
</div>
</div>
</body>
<script>
function switchColor(color){
// 函数执行体
console.log("传递的参数color:",color);
// 按钮初始颜色
document.getElementById('red-button').style.backgroundColor ="lightgray";
document.getElementById('yellow-button').style.backgroundColor ="lightgray";
document.getElementById('green-button').style.backgroundColor ="lightgray";
// 灯的颜色初始化
document.getElementById('red').style.backgroundColor ="lightgray";
document.getElementById('yellow').style.backgroundColor ="lightgray";
document.getElementById('green').style.backgroundColor ="lightgray";
// 判断颜色并根据颜色进行对应的标签变色
if (color == "red"){
document.getElementById('red-button').style.backgroundColor = color;
document.getElementById('red').style.backgroundColor = color;
}
else if(color == "yellow" ){
document.getElementById('yellow-button').style.backgroundColor =color;
document.getElementById('yllow').style.backgroundColor =color;
}
else{
document.getElementById('green-button').style.backgroundColor =color;
document.getElementById('green').style.backgroundColor =color;
}
}
</script>
</html>
