Fatal编程技术网

Javascript HTML&；交通灯

javascript html css

Javascript HTML&；交通灯,javascript,html,css,Javascript,Html,Css,因此，我必须为一个工作的交通灯写一段代码，当点击按钮时，灯会改变，然后另一个按钮会启动自动序列，在x时间后改变灯本身。现在，由于这是CS的一项研究任务，我正在寻找简单的代码进行开发，并找到了以下链接，从中我创建了以下代码 交通灯 var lightStates={红色：0，琥珀色：1，绿色：2}； var currentState=lightStates.red； document.getElementById（'changeBtn'）。onclick=function（）{ changeS

因此，我必须为一个工作的交通灯写一段代码，当点击按钮时，灯会改变，然后另一个按钮会启动自动序列，在x时间后改变灯本身。现在，由于这是CS的一项研究任务，我正在寻找简单的代码进行开发，并找到了以下链接，从中我创建了以下代码


交通灯
var lightStates={红色：0，琥珀色：1，绿色：2}；
var currentState=lightStates.red；
document.getElementById（'changeBtn'）。onclick=function（）{
changeState（）；
};
函数changeState（）
{
清除（）；
开关（当前状态）
{
case lightStates.red：
{
document.getElementById（“红色”）.className=“浅红色”；
currentState=lightStates.amber；
}
打破
case lightStates.amber：
{
document.getElementById（“琥珀色”）.className=“淡琥珀色”；
currentState=lightStates.green；
}中断；
case lightStates.green：
{
document.getElementById（“绿色”）.className=“浅绿色”；
currentState=lightStates.red；
}中断；
}
}
函数clear（）{
document.getElementById（“红色”）.className=“灯灭”；
document.getElementById（“琥珀色”）.className=“灯灭”；
document.getElementById（“绿色”）.className=“点亮”；
}
1.交通灯
{
宽度：50px；
高度：75px；
背景颜色：灰色；
}
.光
{
宽度：20px；
高度：20px；
边框：1px实心；
左边距：自动；
右边距：自动；
边界半径：50px；
}
红色
{
背景颜色：红色
}
琥珀色
{
背景颜色：黄色
}
绿色
{
背景颜色：绿色；
}
关
{
背景色：透明；
}
改变
现在在提供的网站上，交通灯似乎工作得很好，而在我的网站上，交通灯是显示的，但我似乎无法得到任何颜色显示。谁能告诉我哪里出了问题，因为我在HTML、CSS和JavaScript方面的经验很少。谢谢

您需要使用JavaScript的setInterval函数，并通过单击按钮调用它。如果再次单击按钮，则清除间隔

这里的
launchAuto（）
是一个函数，它将设置1秒（1000ms）的间隔，并在每1秒后调用changeState（）函数

如果再次单击按钮，即
interval！=“”
然后它将清除间隔

var-lightStates={红色：0，琥珀色：1，绿色：2}；
var currentState=lightStates.red；
间隔=”；
函数launchAuto（）
{
如果（间隔==“”）
{
间隔=设置间隔（函数（）{
changeState（）；
}, 1000);
}
其他的
{
间隔时间；
}
}
document.getElementById（'changeBtn'）。onclick=function（）{
changeState（）；
};
函数changeState（）
{
清除（）；
开关（当前状态）
{
case lightStates.red：
{
document.getElementById（“红色”）.className=“浅红色”；
currentState=lightStates.amber；
}
打破
case lightStates.amber：
{
document.getElementById（“琥珀色”）.className=“淡琥珀色”；
currentState=lightStates.green；
}中断；
case lightStates.green：
{
document.getElementById（“绿色”）.className=“浅绿色”；
currentState=lightStates.red；
}中断；
}
}
函数clear（）{
document.getElementById（“红色”）.className=“灯灭”；
document.getElementById（“琥珀色”）.className=“灯灭”；
document.getElementById（“绿色”）.className=“点亮”；
}
。交通灯
{
宽度：50px；
高度：75px；
背景颜色：灰色；
}
.光
{
宽度：20px；
高度：20px；
边框：1px实心；
左边距：自动；
右边距：自动；
边界半径：50px；
}
红色
{
背景颜色：红色
}
琥珀色
{
背景颜色：黄色
}
绿色
{
背景颜色：绿色；
}
关
{
背景色：透明；
}

改变

自动
抱歉，一定是解释错了，但我遇到的问题是，当按下按钮时，红色指示灯将显示，但单击按钮后没有任何变化。不过，感谢您提前帮助我完成任务的第二部分。 
<!DOCTYPE html>
<html>

<head>
<title>Traffic Light</title>
<script>
var lightStates = {red:0,amber:1,green:2};
var currentState = lightStates.red;

document.getElementById('changeBtn').onclick=function(){
    changeState();
};


function changeState()
{
    clear();
  switch(currentState)
  {
    case lightStates.red:
    {
      document.getElementById("red").className ="light red";
      currentState =  lightStates.amber;
    }
    break;
    case lightStates.amber:
    {
      document.getElementById("amber").className ="light amber";
      currentState = lightStates.green;
    } break;
     case lightStates.green:
    {
      document.getElementById("green").className ="light green";
      currentState = lightStates.red;
    } break;
   }
}

function clear(){
   document.getElementById("red").className ="light off";
   document.getElementById("amber").className ="light off";
   document.getElementById("green").className ="light off";
}
</script>

<style type="text/css">
    .traffic-light
{
  width:50px;
  height:75px;
  background-color:gray;
}

.light
{
  width:20px;
  height:20px;
  border:1px solid;
  margin-left:auto;
  margin-right:auto;
  border-radius: 50px;
}

.red
{
  background-color:red
}
.amber
{
  background-color:yellow
}
.green
{
  background-color:green;
}

.off
{
  background-color:transparent;
 }
</style>
</head>

<body>
<div class="traffic-light">
  <div class="light off" id="red"></div>
  <div class="light off" id="amber"></div>
  <div class="light off" id="green"></div>
</div>
<button id="changeBtn">Change</button>

</body>

</html>