Question

第3部分我一直很困惑抓住html和js的基本概念，以便用一个数组和一个按钮制作一个交通信号灯。到目前为止，我成功地使css和所有资产看起来都是形状和颜色。我想知道什么会有助于修复此代码，因为我不确定这个问题是什么。我研究的其他网站给了我一些完全不同的东西，如公共和东西。不知道。我使用记事本，并且必须把它放在我的课程中。

HTML：

<!DOCTYPE HTML>
<html>
<head>
<title> Traffic Light Script </title> <!-- Name for the above tab -->
<link href="TrafficCascade.css" rel="stylesheet">
</head>
<body>  
<h1> Traffic Light </h1><!-- -->
<table> <!-- -->
<tr>
<td>
<button onClick="functionary()">Switch</button>
<div id="redL"></div>
<div id="yellowL"></div>
<div id="greenL"></div>
</td>
</tr>
</table>
<script src="Trafficvarscript.js"></script>
</body>
</html>

的CSS：

#redL{
height: 50px;
width: 50px;
margin: 1px auto;
background-color: #7A0000;
border-radius: 50px;
border: solid 1px black;
padding: 1px;
}
#yellowL{
height: 50px;
width: 50px;
margin: 1px auto;
background-color: #7A5C00;
border-radius: 50px;
border: solid 1px black;
padding: 1px;
}
#greenL{
height: 50px;
width: 50px;
margin: 1px auto;
background-color: #008000;
border-radius: 50px;
border: solid 1px black;
padding: 1px;
}
table{         /* Doesn't need dashes */
height: 180px;
width: 80px;
background-color: #000000;
border: 1px #000000;
text-align: center; 
margin-left: 50%; /* makes margin right 50% */
padding: 1px;
}
h1{
text-align: center;
padding: 1px;
}

使用Javascript：

var time = 0;
function functionary(){
time++;
}
{var red = document.getElementById('redL')
var yellow = document.getElementById('yellowL')
var green = document.getElementById('greenL')
var Colours = ["#FF0000","#FFB300","#05FF0D","#7A0000","#7A5C00","#008000"];
}
if(time == 1){
red.style.background = Colours[1];
yellow.style.background = Colours[4];
green.style.background = Colours[6];
}
else if(time == 2){
red.style.background = Colours[4];
yellow.style.background = Colours[2];
green.style.background = Colours[6];    
}
else if(time == 3){
red.style.background = Colours[4];
yellow.style.background = Colours[5];
green.style.background = Colours[3];
}
else if(time == 4){
var time = 0;
};

第4部分

因此，对于我的课程作业，我必须自动生成一个没有任何输入的交通信号灯，这使我进入javascript中的onload函数，该函数在加载页面时运行脚本。我想知道如何在我当前的代码中正确实现它。我还希望交通灯在时间延迟的情况下循环通过颜色，这可以通过设定的间隔来完成。我正在努力正确地添加这两个功能以使其工作。我重用了css，只更改了js和html。

Answer 1

我一直在进行相同的控制评估，这是我的代码完美无缺：

<!DOCTYPE html>
<html>
<body>

<title>Javascript Task 3</title>

<h1>JavaScript Task 3</h1>

<button onclick="changeImage()">Change Lights</button>

<img id="Image" src="tlr.jpg"  width="150px" height="300px">

<script>
function changeImage() {
    var image = document.getElementById('Image');
    if (image.src.match("tla.jpg")) {
        image.src = "tlr.jpg";

    } else if (image.src.match("tlr.jpg")) {
        image.src = "tlra.jpg";

    } else if (image.src.match("tlra.jpg")) {
        image.src = "tlg.jpg";

    } else if (image.src.match("tlg.jpg")) {
        image.src = "tla.jpg";
    }
}
</script>

</body>
</html>

为了使代码正常工作，以下是使用的图像：

但是，您需要将图像保存在与代码本身相同的文件夹中 - 图像需要根据代码中的内容进行相应命名：

tlr.jpg =红色交通灯
tlra.jpg =红色和琥珀色交通灯
tlg.jpg =绿色交通灯
tla.jpg =琥珀色交通灯

希望我有所帮助

Answer 2

所有内容都按顺序显示，但更改颜色的JavaScript条件仅在页面加载时调用一次。每次按下按钮时都需要执行检查，因此请将它们添加到functionary方法中，如下所示：

var time = 0;
function functionary(){
  time++;

  if(time == 4){
    time = 1;
  }

  updateLights();
}

var red = document.getElementById('redL')
var yellow = document.getElementById('yellowL')
var green = document.getElementById('greenL')
var Colours = ["#FF0000","#FFB300","#05FF0D","#7A0000","#7A5C00","#008000"];

function updateLights() {
  if(time == 1){
    red.style.background = Colours[0];
    yellow.style.background = Colours[3];
    green.style.background = Colours[5];
  }
  else if(time == 2){
    red.style.background = Colours[3];
    yellow.style.background = Colours[1];
    green.style.background = Colours[5];    
  }
  else if(time == 3){
    red.style.background = Colours[3];
    yellow.style.background = Colours[4];
    green.style.background = Colours[2];
  }
}

注意我在这个新的updateLights方法中解决了一些其他问题。

Answer 3

此代码可以使用

<?php

class TT
{
    const  ABC = [
        'A1' => 123,
        'A2' => [
            'B1' => 123,
            'B2' => 5566
        ]
    ];

    public function f1()
    {
        // PhpStorm can only show candidate for the first level of the array
        // not for deeper array
        echo self::ABC['A2']['B1'];

        // not show error tips for not exist index
        echo self::ABC['A12345']['B1'];
    }
}

交通灯课程 - A452

3 个答案: