HTML交通灯
HTML交通灯
提问于 2016-11-23 11:51:59
我试图用html和JavaScript制作交通灯，我用记事本写它，并在保存它时将它转换成html文件，我的代码只显示外部框，请帮助。
<!DOCTYPE html>
<html>
<head>
<title>Traffic Light</title>
</head>
<body>
<h1>Traffic Light</h1>
<p>Click the button for light to change.</p>
<div
style="width:100.5px;height:320px;border:3px solid #000;">
<button onclick=circle2.style.fill="yellow";><Change Lights
<button onclick=circle1.style.fill="transparent";><Change Lights
<button onclick=circle2.style.fill="transparent";><Change Lights
<button onclick=circle3.style.fill="green";>Change Lights
</button>
<svg id="svg1" style="width: 3.5in; height: 1in">
<circle id="circle1" r="40" cx="50" cy="50" style="fill: red; stroke: black; stroke-width: 2"/>
</svg>
<svg id="svg2" style="width: 3.5in; height: 1in">
<circle id="circle2" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
<svg id="svg3"style="width: 3.5in; height: 1in">
<circle id="circle3" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
</script>
</div>
</body>
</html>回答 3
Stack Overflow用户
回答已采纳
发布于 2016-11-23 11:57:15
您的html语法有问题：
<button onclick=circle2.style.fill="yellow";><Change Lights
---------------------------------------------^您还关闭了一个</script>标记(从未打开)。
以下是解决办法：
<h1>Traffic Light</h1>
<p>Click the button for light to change.</p>
<div style="width:100.5px;height:320px;border:3px solid #000;">
<button onclick=circle2.style.fill="yellow";>Change Lights</button>
<button onclick=circle1.style.fill="transparent";>Change Lights</button>
<button onclick=circle2.style.fill="transparent";>Change Lights</button>
<button onclick=circle3.style.fill="green";>Change Lights</button>
<svg id="svg1" style="width: 3.5in; height: 1in">
<circle id="circle1" r="40" cx="50" cy="50" style="fill: red; stroke: black; stroke-width: 2"/>
</svg>
<svg id="svg2" style="width: 3.5in; height: 1in">
<circle id="circle2" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
<svg id="svg3"style="width: 3.5in; height: 1in">
<circle id="circle3" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
</div>
我真的建议您找到一些IDE (或者一些更好的文本编辑器，语法突出显示)和，而不是，使用记事本进行html。
Stack Overflow用户
发布于 2016-11-23 11:57:43
您的代码无效--我已经为您更正了按钮，但您现在需要做剩下的操作：
<button onclick="circle2.style.fill='yellow';">Change Lights</button>
<button onclick="circle1.style.fill='transparent';">Change Lights</button>
<button onclick="circle2.style.fill='transparent';">Change Lights</button>
<button onclick="circle3.style.fill='green';">Change Lights</button>注意这些变化！
我还整理了更多的东西，删除了无效的标签等等。https://jsfiddle.net/xwudu9c8/
你也应该把你的物品重新贴上标签，这样它们才有意义。
Stack Overflow用户
发布于 2021-05-21 10:57:55
我知道已经有一段时间了，但我想我会有一出戏。
我的努力是：
const trafficLightStatus = Object.freeze({"red":1, "redandamber":2, "green":3, "amber":4})
var currentTrafficLightStatus;
var interval;
InitTrafficLights();
function InitTrafficLights(){
currentTrafficLightStatus = trafficLightStatus["red"];
TurnRed();
}
$('#change-lights').on("click", function() {
ChangeLights();
});
$('#lights-interval').on("click", function() {
$('#lights-interval').hide();
$('#change-lights').hide();
$('#lights-interval-stop').show();
clearInterval(interval);
interval = setInterval(ChangeLights, 1500);
});
$('#lights-interval-stop').on("click", function() {
$('#lights-interval-stop').hide();
$('#lights-interval').show();
$('#change-lights').show();
clearInterval(interval);
});
function ChangeLights(){
// Move to next status
ChangeTrafficLightStatus();
// Status switch to change light display
switch(currentTrafficLightStatus) {
case trafficLightStatus["red"]:
TurnRed();
break;
case trafficLightStatus["redandamber"]:
RedToAmber();
break;
case trafficLightStatus["green"]:
TurnGreen();
break;
case trafficLightStatus["amber"]:
GreenToAmber();
break;
default:
AllLightsOff();
}
}
// Update status to next status
function ChangeTrafficLightStatus(){
if (currentTrafficLightStatus < Object.keys(trafficLightStatus).length){
currentTrafficLightStatus++;
}
else{
currentTrafficLightStatus = 1;
}
}
// Change light display to match status
function TurnRed(){
// Red on
AllLightsOff();
RedOn();
}
function RedToAmber(){
// Red & Amber on
AllLightsOff();
RedOn();
AmberOn();
}
function TurnGreen(){
// Green on
AllLightsOff();
GreenOn();
}
function GreenToAmber(){
// Amber on
AllLightsOff();
AmberOn();
}
// Set light display
function AllLightsOff(){
$('#red-light').css({ fill: "transparent" });
$('#amber-light').css({ fill: "transparent" });
$('#green-light').css({ fill: "transparent" });
}
function RedOn(){
$('#red-light').css({ fill: "#cc3232" });
}
function AmberOn(){
$('#amber-light').css({ fill: "#e7b416" });
}
function GreenOn(){
$('#green-light').css({ fill: "#2dc937" });
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Traffic Light</h1>
<p>Click the button for light to change.</p>
<button id="change-lights" type="button">Change lights
</button>
<button id="lights-interval" type="button">Automate change lights on interval
</button>
<button id="lights-interval-stop" type="button" style="display:none;">Stop automation
</button>
<div>
<svg height="550" width="150">
<rect x="25" y="25" width="100" height="300" style="fill:#fff;stroke-width:3;stroke:#000" />
<circle id="red-light" cx="75" cy="75" r="40" stroke="black" stroke-width="3" fill="#cc3232" />
<circle id="amber-light" cx="75" cy="175" r="40" stroke="black" stroke-width="3" fill="#e7b416" />
<circle id="green-light" cx="75" cy="275" r="40" stroke="black" stroke-width="3" fill="#2dc937" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40763794
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号