我在下面有这个代码,我需要它在没有用户输入的情况下自动工作。它也应该在一个循环中,而不是经过一次序列。 我试图更改代码,但它所做的一切都不起作用或改变交通信号灯的形状。 谢谢。
<!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>
代码应该与序列和现在按钮一样。但我不能使它与第一个代码形状相同。
<!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>
答案 0 :(得分:0)
我想你可以尝试这样的事情:
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++;
if (counter == maxSec + 1) {
return autoLights();
}
lightOne(counter);
timer();
}, 2000);
}
function autoLights() {
counter = 1;
lightOne(counter);
timer();
}
autoLights();
&#13;
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;
}
&#13;
<div id="traffic-light">
<div id="stopLight" class="lightbulb"></div>
<div id="slowLight" class="lightbulb"></div>
<div id="goLight" class="lightbulb"></div>
</div>
&#13;
答案 1 :(得分:0)
用以下代码替换你的脚本。
//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.
答案 2 :(得分:0)
使用setInterval
代替setTimeout
。
document.getElementById('autoLights').onclick = autoLights;
autoLights();
var call = ['stopRed','slowYellow','goGreen'];
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";
}
var count = 0;
function timer() {
setInterval(function() {
count = count % 3;
window[call[count]]();
count++;
}, 1000);
}
function autoLights() {
timer();
}
&#13;
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;
}
&#13;
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<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>
&#13;