Question

因此我必须为工作交通信号灯编写一段代码，其中灯光在按钮点击时改变，然后另一个按钮将启动自动序列，该序列将在x时间后改变灯光本身。现在因为这是一个CS的研究任务，我正在寻找简单的代码来开发，并找到了我创建以下代码的以下链接;

<!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>

现在在提供的网站上，红绿灯似乎完美地工作，而在我的交通灯显示，但我似乎无法得到任何颜色显示。任何人都可以指出我在哪里出错我的方向，因为我在HTML，CSS和JavaScript方面经验很少。谢谢！

Answer 1

您需要使用JavaScript的 setInterval 功能，并在单击按钮时调用它。如果再次单击该按钮，请清除间隔。

此处launchAuto()是一个函数，它将设置1秒（1000毫秒）的间隔，并在每1秒后调用changeState（）函数。

如果再次点击该按钮，即interval != ""，则会清除间隔。

＆＃13;

var lightStates = {red:0,amber:1,green:2};
var currentState = lightStates.red;

interval = "";

function launchAuto()
{
  if(interval == "")
  {
    interval = setInterval(function(){
    changeState();
    }, 1000);
  }
  else
  {
      clearInterval(interval);
  }
}
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";
}

＆＃13;

    .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;
 }

＆＃13;

<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>
<button onClick="launchAuto();">Automatic</button>

＆＃13;

HTML＆amp; JavaScript交通灯

1 个答案: