Question

我正在尝试使用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>

Answer 1

您的代码无效 - 我已经为您更正了按钮，但您现在需要完成剩下的工作：

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

你还应该重新标记你的物品，使它们有意义。

Answer 2

我知道已经有一段时间了，但我想我会玩。

这是我的努力：

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>

Answer 3

你的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（或者一些更好的语法高亮文本编辑器）和不使用notepad for html。

HTML交通灯

3 个答案: