每3秒钟更改一次div上的课程

Question

我希望你一切都好。 我想知道您的集体才华是否可以帮助我？ 我有一个圆圈的div。 我也有三个CSS类。 我想每3秒更改div的类和标签的文本。 任何可以指出我要去哪里的人都会非常有帮助。

这是我所拥有的，目前似乎什么也没做：

 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 = "OK"; } else if (traffLight.class == "yellow") { traffLight.className = "green"; status.innerText = "Authorised"; } else { traffLight.className = "red"; status.innerText = "Stop Working"; } }, 3000); }; }

 #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 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 = "OK"; } 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进行比较

请参阅下面的修改后的代码：

 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 = "OK"; } else if (traffLight.className == "yellow") { traffLight.className = "green"; status.innerText = "Authorised"; } else { traffLight.className = "red"; status.innerText = "Stop Working"; } }, 3000); }; traffGo(); }

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

每3秒钟更改一次div上的课程

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-07-14 16:49:44

解决方案2
1 2016-07-14 16:50:52

每3秒钟更改一次div上的课程

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-07-14 16:49:44

解决方案2 1 2016-07-14 16:50:52

解决方案1
1 已采纳 2016-07-14 16:49:44

解决方案2
1 2016-07-14 16:50:52