Question

我希望你们都很好。我想知道你的集体天才是否可以帮助我？我有一个圆形的div。我还有三个CSS类。我想每3秒更改一次div的类和标签的文本。任何能指出我出错的人都会非常有帮助。

这是我拥有的，目前似乎没有做任何事情：

＆＃13;

function loadTraffLight() {
  var traffLight = document.getElementById("traffLight");
  var status = document.getElementById("status");
  var timer;
  var go = function traffGo() {
    timer = setInterval(function() {
      if (traffLight.class == "red") {
        traffLight.className = "yellow";
        status.innerText = "O.K";
      } else if (traffLight.class == "yellow") {
        traffLight.className = "green";
        status.innerText = "Authorised";
      } else {
        traffLight.className = "red";
        status.innerText = "Stop Working";

      }
    }, 3000);
  };
}

＆＃13;

#traffLight {
  border-radius: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid #000000;
  margin: 0 auto;
  color: #808080;
}
#status {
  text-align: center;
  vertical-align: bottom;
}
.red {
  background: #ff0000;
}
.yellow {
  background: #ffd800;
}
.green {
  background: #00ff21;
}

＆＃13;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>Traffic light</title>
</head>

<body onload="loadTraffLight()">
  <h1>Traffic light effect demo</h1>
  <div id="traffLight">
    <label id="status"></label>
  </div>
</body>

</html>

＆＃13;

Answer 1

请务必使用className。除此之外，我已经改变了你的功能结构：

function loadTraffLight() {
            var traffLight = document.getElementById("traffLight");
            var status = document.getElementById("status");
            var timer;

           
                timer = setInterval(function () {
                    if (traffLight.className == "red") {
                        traffLight.className = "yellow";
                        status.innerText = "O.K";
                    }
                    else if (traffLight.className == "yellow") {
                        traffLight.className = "green";
                        status.innerText = "Authorised";
                    }
                    else {
                        traffLight.className = "red";
                        status.innerText = "Stop Working";

                    }
                }, 1000);
        }

#traffLight{
            border-radius:100px;
           
            width:200px;
            height:200px;
            border:1px solid #000000;
            margin:0 auto;
            color:#808080;
        }
        #status{
            text-align:center;
            vertical-align:bottom;
        }

        .red{
            background:#ff0000;
        }
        .yellow{
            background:#ffd800;
        }
        .green{
            background:#00ff21;
        }

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Traffic light</title>
    

</head>
<body onload="loadTraffLight()">
    <h1>Traffic light effect demo</h1>
    <div id="traffLight">
        <label id="status"></label>
    </div>

    
</body>
</html>

Answer 2

两件事：

您永远不会在traffGo()

loadTraffLight()

您应该与traffLight.className而不是traffLight.class

见下面修改的代码：

＆＃13;

function loadTraffLight() {
            var traffLight = document.getElementById("traffLight");
            var status = document.getElementById("status");
            var timer;          
            function traffGo() {
                timer = setInterval(function () {
                    if (traffLight.className == "red") {
                        traffLight.className = "yellow";
                        status.innerText = "O.K";
                    }
                    else if (traffLight.className == "yellow") {
                        traffLight.className = "green";
                        status.innerText = "Authorised";
                    }
                    else {
                        traffLight.className = "red";
                        status.innerText = "Stop Working";
                    }
                }, 3000);
            };
            traffGo();
        }

＆＃13;

#traffLight{
            border-radius:100px;
           
            width:200px;
            height:200px;
            border:1px solid #000000;
            margin:0 auto;
            color:#808080;
        }
        #status{
            text-align:center;
            vertical-align:bottom;
        }

        .red{
            background:#ff0000;
        }
        .yellow{
            background:#ffd800;
        }
        .green{
            background:#00ff21;
        }

＆＃13;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Traffic light</title>
    

</head>
<body onload="loadTraffLight()">
    <h1>Traffic light effect demo</h1>
    <div id="traffLight">
        <label id="status"></label>
    </div>    
</body>
</html>

＆＃13;

每3秒更换div一次

2 个答案: