Fatal编程技术网
  • javascript/
  • Javascript 不带按钮的交通灯颜色变化

Javascript 不带按钮的交通灯颜色变化

javascript html css

Javascript 不带按钮的交通灯颜色变化,javascript,html,css,Javascript,Html,Css,我有下面的代码，我需要它在没有用户输入的情况下自动工作。它也应该在一个循环中，而不是一次遍历序列。 我试图改变代码，但它没有起作用，也没有改变交通灯的形状。 多谢各位 <!DOCTYPE html> <html> <head> <style> </style> <script src="/scripts/snippet-javascript-console.min.js?v=1"></scri

我有下面的代码，我需要它在没有用户输入的情况下自动工作。它也应该在一个循环中，而不是一次遍历序列。 我试图改变代码，但它没有起作用，也没有改变交通灯的形状。 多谢各位

<!DOCTYPE html>
<html>
<head>
    <style>

    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    <!DOCTYPE html>
<html>
<head>
    <style>
        body {
  font-family: sans-serif;
}

#controlPanel {
  float: left;
  padding-top: 30px;
}

.button {
  background-color: gray;
  color: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin: 90px 40px;
  cursor: pointer;
}

#traffic-light {
  width: 150px;
  float: left;
  background-color: #333;
  border-radius: 40px;
  margin: 30px 0;
  padding: 20px;
}

.lightbulb {
  height: 100px;
  width: 100px;
  background-color: #111;
  border-radius: 50%;
  margin: 25px auto;
  transition: background 500ms;
}

#controlPanel>h1 {
  margin-top: 30px;
  margin-bottom: 30px;
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    <div id="controlPanel">
  <h1 id="autoLights" class="button">Auto</h1>
</div>

<div id="traffic-light">
  <div id="stopLight" class="lightbulb"></div>
  <div id="slowLight" class="lightbulb"></div>
  <div id="goLight" class="lightbulb"></div>
</div>
    <script type="text/javascript">
document.getElementById('autoLights').onclick = autoLights;

function stopRed() {
  Lights();
  document.getElementById('stopLight').style.backgroundColor = "red";
}

function slowYellow() {
  Lights();
  document.getElementById('slowLight').style.backgroundColor = "orange";
}

function goGreen() {
  Lights();
  document.getElementById('goLight').style.backgroundColor = "green";
}


function Lights() {
  document.getElementById('stopLight').style.backgroundColor = "black";
  document.getElementById('slowLight').style.backgroundColor = "black";
  document.getElementById('goLight').style.backgroundColor = "black";
}


function lightOne(num) {
  Lights();
  switch (num) {
    case 1:
      stopRed();
      break;
    case 2:
      slowYellow();
      break;
    case 3:
      goGreen();
      break;
    default:
      alert("you made some error");
  }
}

counter = 0;
maxSec = 3;

function timer() {
  setTimeout(function() {

    counter++;
    lightOne(counter);
    if (counter == maxSec) {
      return;
    }
    timer();
  }, 2000);
}

function autoLights() {
  counter = 1;
  lightOne(counter);
  timer();
}
    </script>
</body>
</html>
    <script type="text/javascript">

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


身体{
字体系列：无衬线；
}
#控制面板{
浮动：左；
填充顶部：30px；
}
.按钮{
背景颜色：灰色；
颜色：白色；
边界半径：10px；
填充：20px；
文本对齐：居中；
利润率：90px 40px；
光标：指针；
}
#交通灯{
宽度：150px；
浮动：左；
背景色：#333；
边界半径：40px；
利润率：30px0；
填充：20px；
}
.灯泡{
高度：100px；
宽度：100px；
背景色：#111；
边界半径：50%；
保证金：25像素自动；
过渡：背景500ms；
}
#控制面板>h1{
边缘顶部：30px；
边缘底部：30px；
}
自动的
document.getElementById（'autoLights'）。onclick=autoLights；
函数stopRed（）{
灯光（）；
document.getElementById（'stopLight'）.style.backgroundColor=“红色”；
}
函数slowYellow（）{
灯光（）；
document.getElementById（'slowLight'）.style.backgroundColor=“橙色”；
}
函数goGreen（）{
灯光（）；
document.getElementById（'goLight'）.style.backgroundColor=“绿色”；
}
功能灯（）{
document.getElementById（'stopLight'）.style.backgroundColor=“黑色”；
document.getElementById（'slowLight'）.style.backgroundColor=“黑色”；
document.getElementById（'goLight'）.style.backgroundColor=“黑色”；
}
函数lightOne（num）{
灯光（）；
开关（num）{
案例1：
停止（）；
打破
案例2：
slowYellow（）；
打破
案例3：
戈格林（）；
打破
违约：
警惕（“你犯了一些错误”）；
}
}
计数器=0；
maxSec=3；
函数计时器（）{
setTimeout（函数（）{
计数器++；
lightOne（计数器）；
如果（计数器==最大秒）{
返回；
}
定时器（）；
}, 2000);
}
函数autoLights（）{
计数器=1；
lightOne（计数器）；
定时器（）；
}
序列和现在按钮的代码应该是这样的。但我不能使它的形状与第一个代码相同

<!DOCTYPE html>
<html>
<head>
    <style>
        .traffic-light {
  height: 40px;
  width: 40px;
  margin: 1px;
  background-color: black;
  border-radius: 20px;
  border: solid 1px #000
}

.surround {
  padding: 10px;
  background-color: grey;
  display: inline-block;
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    <!DOCTYPE html>
<html lang="en">


<body>
  <div id="wrapper">
    <div class="surround">
      <div id="red-light" class="traffic-light"></div>
      <div id="yellow-light" class="traffic-light"></div>
      <div id="green-light" class="traffic-light"></div>
    </div>
  </div>
</body>

</html>
    <script type="text/javascript">
        function trafficLights() {
  var sequenceData = [
      [5, 1, 0, 0],
      [2, 1, 1, 0],
      [5, 0, 0, 1],
      [3, 0, 1, 0]
    ],
    lights = [],
    index = 0;

  for (var i = 0, elemId;
    (elemId = arguments[i]); i++)
    lights[i] = document.getElementById(elemId);

  function display() {
    if (index >= sequenceData.length)
      index = 0;

    for (var i = 0, cv, dLen = lights.length; i < dLen; i++)
      lights[i].style.backgroundColor = (sequenceData[index][i + 1] ? lights[i].id.match(/^[a-z]+/i).toString() : '#000');

    setTimeout(display, sequenceData[index++][0] * 977);
  }

  display();
}


window.onload = function() {
  trafficLights("red-light", "yellow-light", "green-light");
};
    </script>
</body>
</html>


1.交通灯{
高度：40px；
宽度：40px；
保证金：1px；
背景色：黑色；
边界半径：20px；
边框：实心1px#000
}
.环绕{
填充：10px；
背景颜色：灰色；
显示：内联块；
}
功能交通灯（）{
变量序列数据=[
[5, 1, 0, 0],
[2, 1, 1, 0],
[5, 0, 0, 1],
[3, 0, 1, 0]
],
灯光=[]，
指数=0；
对于（var i=0，elemId；
（elemId=arguments[i]）；i++）
lights[i]=document.getElementById（elemId）；
函数显示（）{
如果（索引>=sequenceData.length）
指数=0；
对于（var i=0，cv，dLen=lights.length；i
我想你可以试试这样的东西：

函数stopRed（）{
灯光（）；
document.getElementById（'stopLight'）.style.backgroundColor=“红色”；
}
函数slowYellow（）{
灯光（）；
document.getElementById（'slowLight'）.style.backgroundColor=“橙色”；
}
函数goGreen（）{
灯光（）；
document.getElementById（'goLight'）.style.backgroundColor=“绿色”；
}
功能灯（）{
document.getElementById（'stopLight'）.style.backgroundColor=“黑色”；
document.getElementById（'slowLight'）.style.backgroundColor=“黑色”；
document.getElementById（'goLight'）.style.backgroundColor=“黑色”；
}
函数lightOne（num）{
灯光（）；
开关（num）{
案例1：
停止（）；
打破
案例2：
slowYellow（）；
打破
案例3：
戈格林（）；
打破
违约：
警惕（“你犯了一些错误”）；
}
}
计数器=0；
maxSec=3；
函数计时器（）{
setTimeout（函数（）{
计数器++；
如果（计数器==maxSec+1）{
返回自动灯光（）；
}
lightOne（计数器）；
定时器（）；
}, 2000);
}
函数autoLights（）{
计数器=1；
lightOne（计数器）；
定时器（）；
}
自动灯光（）

正文{
字体系列：无衬线；
}
#控制面板{
浮动：左；
填充顶部：30px；
}
.按钮{
背景颜色：灰色；
颜色：白色；
边界半径：10px；
填充：20px；
文本对齐：居中；
利润率：90px 40px；
光标：指针；
}
#交通灯{
宽度：150px；
浮动：左；
背景色：#333；
边界半径：40px；
利润率：30px0；
填充：20px；
}
.灯泡{
高度：100px；
宽度：100px；
背景色：#111；
边界半径：50%；
保证金：25像素自动；
过渡：背景500ms；
}
#控制面板>h1{
边缘顶部：30px；
边缘底部：30px；
}


hi用以下代码替换脚本


//document.getElementById('autoLights').onclick = autoLights;

function stopRed() {
  Lights();
  document.getElementById('stopLight').style.backgroundColor = "red";
}

function slowYellow() {
  Lights();
  document.getElementById('slowLight').style.backgroundColor = "orange";
}

function goGreen() {
  Lights();
  document.getElementById('goLight').style.backgroundColor = "green";
}


function Lights() {
  document.getElementById('stopLight').style.backgroundColor = "black";
  document.getElementById('slowLight').style.backgroundColor = "black";
  document.getElementById('goLight').style.backgroundColor = "black";
}


function lightOne(num) {
  Lights();
  switch (num) {
    case 1:
      stopRed();
      break;
    case 2:
      slowYellow();
      break;
    case 3:
      goGreen();
      break;
    default:
      alert("you made some error");
  }
}

counter = 0;
maxSec = 3;

function timer() {
  setTimeout(function() {

    counter++;
    lightOne(counter);
    if (counter == maxSec) {
        counter = 0; 
      //return;
    }
    timer();
  }, 2000);
}

function autoLights() {
  counter = 1;
  lightOne(counter);
  timer();
}
autoLights(); // to auto call lighting.



使用
setInterval
代替
setTimeout



document.getElementById（'autoLights'）。onclick=autoLights；
自动灯光（）；
var call=['stopRed'、'slowYellow'、'goGreen']；
函数stopRed（）{
灯光（）；
document.getElementById（'stopLight'）.style.backgroundColor=“红色”；
}
函数slowYellow（）{
灯光（）；
document.getElementById（'slowLight'）.style.backgroundColor=“橙色”；
}
函数goGreen（）{
灯光（）；
document.getElementById（'goLight'）.style.backgroundColor=“绿色”；
}
功能灯（）{
document.getElementById（'stopLight'）.style.backgroundColor=“黑色”；
document.getElementById（'slowLight'）.style.backgroundColor=“黑色”；
document.getElementById（'goLight'）.style.backgroundColor=“黑色”；
}
var计数=0；
函数计时器（）{
setInterval（函数（）{
计数=计数%3；
窗口[呼叫[计数]（）；
计数+