Javascript 有人能告诉我怎么让这个红绿灯自动工作吗？ 交通灯 1.交通灯{ 宽度：100%； } .关{ 背景色：透明！重要； } 1.交通灯{ 保证金：0自动； 宽度：20%； 最小宽度：180px； 边框：1px纯色灰色； } ·交通灯组{ 保证金：0自动； 宽度：150px； 高度：150像素； 边框：3倍纯色灰色； 边界半径：50%； 边缘顶部：5px； 边缘底部：5px； } 瑞德先生{ 背景色：红色； } 黄先生{ 背景颜色：黄色； } 格林先生{ 背景颜色：绿色； } 下一周期 自动循环 var$tl=$（'.traffic light'），//交通灯元素 $lights=$（'.light'，$tl），//一个地方的所有灯光 状态=[0,4,6,1,4]；//交通信号灯的二元态 功能循环（）{ var currentStateArr=$（'.light'，$tl）.map（函数（i，lightEl）{ return~~！（$（lightEl）.hasClass（'off'）； }).get（）， currentStateNum=parseInt（currentStateArr.join（“”），2）；//将当前TL状态转换为十进制数字以获得更多舒适性 如果（currentStateNum==0）{//如果所有的灯都熄灭了，我们在这里，那么下一个明显是红色的 返回$lights.addClass（'off'）。兄弟姐妹（'.red'）。removeClass（'off'）；//此处无需执行更多操作 } var nextStateIndex=states.indexOf（currentStateNum）+1， nextStateNum=（nextStateIndex==states.length）？0:parseInt（states[nextStateIndex]）， toTurnOn=null；//要打开的灯 $lights.addClass（'off'）；//关闭所有灯光 如果（nextStateNum==4）{//4=100>|红色：开|黄色：关|绿色：关| toTurnOn=$lights.sides（'.red'）； }else如果（nextStateNum==6）{//6=110>|红色：开|黄色：开|绿色：关| toTurnOn=$lights.not（'.green'）； }else如果（nextStateNum==1）{//1=001>|红色：打开|黄色：关闭|绿色：打开| toTurnOn=$lights.sides（'.green'）； }如果（nextStateNum==2）{//2=010>|红色：关闭|黄色：打开|绿色：关闭| toTurnOn=$lights.sides（'.yellow'）； } //打开我们之前决定的 ！（toTurnOn==null）？toTurnOn.removeClass（'off'）：null； } var区间=null； 功能摩托车（）{ 如果（！（间隔===null））{ clearInterval（interval）；//停止循环 interval=null；//清除重新删除的间隔 返回； } //将循环间隔设置为1秒 间隔=设置间隔（循环，1000）；//开始循环并记住间隔 }
是否有人可以编辑此代码并对其进行编程，以便在用户单击该文件时使交通灯立即运行 在javascript的末尾，您可以添加以下内容，这些内容将使用jQuery检测页面何时加载并调用Javascript 有人能告诉我怎么让这个红绿灯自动工作吗？ 交通灯 1.交通灯{ 宽度：100%； } .关{ 背景色：透明！重要； } 1.交通灯{ 保证金：0自动； 宽度：20%； 最小宽度：180px； 边框：1px纯色灰色； } ·交通灯组{ 保证金：0自动； 宽度：150px； 高度：150像素； 边框：3倍纯色灰色； 边界半径：50%； 边缘顶部：5px； 边缘底部：5px； } 瑞德先生{ 背景色：红色； } 黄先生{ 背景颜色：黄色； } 格林先生{ 背景颜色：绿色； } 下一周期 自动循环 var$tl=$（'.traffic light'），//交通灯元素 $lights=$（'.light'，$tl），//一个地方的所有灯光 状态=[0,4,6,1,4]；//交通信号灯的二元态 功能循环（）{ var currentStateArr=$（'.light'，$tl）.map（函数（i，lightEl）{ return~~！（$（lightEl）.hasClass（'off'）； }).get（）， currentStateNum=parseInt（currentStateArr.join（“”），2）；//将当前TL状态转换为十进制数字以获得更多舒适性 如果（currentStateNum==0）{//如果所有的灯都熄灭了，我们在这里，那么下一个明显是红色的 返回$lights.addClass（'off'）。兄弟姐妹（'.red'）。removeClass（'off'）；//此处无需执行更多操作 } var nextStateIndex=states.indexOf（currentStateNum）+1， nextStateNum=（nextStateIndex==states.length）？0:parseInt（states[nextStateIndex]）， toTurnOn=null；//要打开的灯 $lights.addClass（'off'）；//关闭所有灯光 如果（nextStateNum==4）{//4=100>|红色：开|黄色：关|绿色：关| toTurnOn=$lights.sides（'.red'）； }else如果（nextStateNum==6）{//6=110>|红色：开|黄色：开|绿色：关| toTurnOn=$lights.not（'.green'）； }else如果（nextStateNum==1）{//1=001>|红色：打开|黄色：关闭|绿色：打开| toTurnOn=$lights.sides（'.green'）； }如果（nextStateNum==2）{//2=010>|红色：关闭|黄色：打开|绿色：关闭| toTurnOn=$lights.sides（'.yellow'）； } //打开我们之前决定的 ！（toTurnOn==null）？toTurnOn.removeClass（'off'）：null； } var区间=null； 功能摩托车（）{ 如果（！（间隔===null））{ clearInterval（interval）；//停止循环 interval=null；//清除重新删除的间隔 返回； } //将循环间隔设置为1秒 间隔=设置间隔（循环，1000）；//开始循环并记住间隔 },javascript,html,css,Javascript,Html,Css,是否有人可以编辑此代码并对其进行编程，以便在用户单击该文件时使交通灯立即运行 在javascript的末尾，您可以添加以下内容，这些内容将使用jQuery检测页面何时加载并调用autoCycle函数 <!DOCTYPE html> <html> <head> <title>Traffic Light</title> <style type="text/css">
autoCycle<!DOCTYPE html>
<html>
<head>
<title>Traffic Light</title>
<style type="text/css">
.traffic-light {
width: 100%;
}
.off {
background-color: transparent!important;
}
.traffic-light {
margin: 0 auto;
width: 20%;
min-width: 180px;
border: 1px solid gray;
}
.traffic-light div {
margin: 0 auto;
width: 150px;
height: 150px;
border: 3px solid gray;
border-radius: 50%;
margin-top: 5px;
margin-bottom: 5px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="traffic-light">
<div class="light red off"></div>
<div class="light yellow off"></div>
<div class="light green off"></div>
</div>
<button type="button" onclick="cycle()">Next cycle</button>
<button type="button" onclick="autoCycle()">Auto cycle</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript">
var $tl = $('.traffic-light'), // Traffic light element
$lights = $('.light', $tl), // All lights in one place
states = [0, 4, 6, 1, 4]; // Binary states of traffic light
function cycle() {
var currentStateArr = $('.light', $tl).map(function (i, lightEl) {
return ~~!($(lightEl).hasClass('off'));
}).get(),
currentStateNum = parseInt(currentStateArr.join(''), 2); // Converting current TL state to decimal number for more comfort
if (currentStateNum === 0) { // If ALL lights are OFF and we are here then next is obviously red
return $lights.addClass('off').siblings('.red').removeClass('off'); // and nothing to do here more
}
var nextStateIndex = states.indexOf(currentStateNum)+1,
nextStateNum = (nextStateIndex === states.length) ? 0 : parseInt(states[nextStateIndex]),
toTurnOn = null; // Lights to turn on
$lights.addClass('off'); // Setting OFF all lights
if (nextStateNum === 4) { // 4 = 100 > | Red:On | Yellow:Off | Green:Off |
toTurnOn = $lights.siblings('.red');
} else if (nextStateNum === 6) { // 6 = 110 > | Red:On | Yellow:On | Green:Off |
toTurnOn = $lights.not('.green');
} else if (nextStateNum === 1) { // 1 = 001 > | Red:On | Yellow:Off | Green:On |
toTurnOn = $lights.siblings('.green');
} else if (nextStateNum === 2) { // 2 = 010 > | Red:Off | Yellow:On | Green:Off |
toTurnOn = $lights.siblings('.yellow');
}
// Turning on what we decided earlier
!(toTurnOn === null) ? toTurnOn.removeClass('off') : null ;
}
var interval = null;
function autoCycle() {
if (!(interval === null)) {
clearInterval(interval); // Stop cycling
interval = null; // Clear remebered interval
return;
}
// Setting c ycle intervgal to 1 second
interval = setInterval(cycle, 1000); // Starting cycle and remember interval
}
</script>
</body>
</html>
$(function() {
autoCycle()
});
您创建的代码不正确 这个代码可以，我没有添加一个按钮，因为你可以自己做
$( document ).ready(function() {
// When document is fully loaded:
autoCycle();
});
身体{
字体系列：无衬线；
}
#控制面板{
浮动：左；
填充顶部：30px；
}
.按钮{
背景颜色：灰色；
颜色：白色；
边界半径：10px；
填充：20px；
文本对齐：居中；
利润率：90px 40px；
光标：指针；
}
#交通灯{
宽度：150px；
浮动：左；
背景色：#333；
边界半径：40px；
利润率：30px0；
填充：20px；
}
.灯泡{
高度：100px；
宽度：100px；
背景色：#111；
边界半径：50%；
保证金：25像素自动；
过渡：背景500ms；
}
#控制面板>h1{
边缘顶部：30px；
边缘底部：30px；
}
自动灯光（）；
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；
窗口[呼叫[计数]（）；
计数++；
}, 1000);
}
函数autoLights（）{
定时器（）；
}
摩托车之后直接添加功能可能会产生最大的视觉效果
<!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>
<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">
</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">
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();
}
</script>
</body>
</html>