循环更改表格单元格的颜色

Question

Basically I want to create a lightboard its a 4x4 table which changes certain cells background colours in sequence 基本上我想创建一个4x4表格的lightboard，该表格可以按顺序更改某些单元格的背景颜色

It should go yellow 1st , green 2nd,blue 3rd, white 4th, orange 5th then back to yellow and so on for infinite looping. 它应先经过黄色1，绿色2，蓝色3，白色4，橙色5，然后再返回黄色，依此类推，以进行无限循环。

I have this code so far And after 1.5 seconds the cell turns yellow but then no other colours are showing and I get the error Uncaught TypeError: tInterval is not a function 到目前为止，我已经有此代码，并且1.5秒后，该单元变为黄色，但随后没有其他颜色显示，并且出现错误Uncaught TypeError：tInterval不是函数

<html>
<head>
<title>Light Board</title>
</head>

<body>

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
</style>
<table id="lightboard" class="tg" style=undefined;table-layout: fixed; width: 526px">
<colgroup>
<col style="width: 124px">
<col style="width: 129px">
<col style="width: 133px">
<col style="width: 140px">
</colgroup>
  <tr>
    <th class="tg-3as3" style="background-color:#404040";></th>
    <th class="tg-3as3" style="background-color:#404040";></th>
    <th class="tg-3as3" style="background-color:#404040";></th>
    <th id="white4" class="tg-3as3" style="background-color:#404040";></th>
  </tr>
  <tr>
    <td class="tg-3as3" style="background-color:#404040";></td>
    <td id="yellow1" class="tg-3as3" style="background-color:#404040";></td>
    <td class="tg-3as3" style="background-color:#404040";></td>
    <td class="tg-3as3" style="background-color:#404040";></td>
  </tr>
  <tr>
    <td id="blue3" class="tg-3as3" style="background-color:#404040";></td>
    <td class="tg-3as3" style="background-color:#404040";></td>
    <td id="green2"class="tg-3as3" style="background-color:#404040";></td>
    <td class="tg-3as3" style="background-color:#404040";></td>
  </tr>
  <tr>
    <td class="tg-3as3" style="background-color:#404040";></td>
    <td id="orange5" class="tg-3as3" style="background-color:#404040";></td>
    <td class="tg-3as3" style="background-color:#404040";></td>
    <td class="tg-3as3" style="background-color:#404040";></td>
  </tr>
</table>

</body>

<script>

var yellow1 = document.getElementById("yellow1");
var green2 = document.getElementById("green2");
var blue3 = document.getElementById("blue3");
var white4 = document.getElementById("white4");
var orange5 = document.getElementById("orange5");

function tInterval() {
    tInterval = setInterval(doSequence, 1500)
}
function doSequence() {
if(i==1) { 
    yellow1.style.backgroundColor="rgb(255,255,0)";
}
else { 
    yellow1.style.backgroundColor="#404040";
}

if(i==2) {
    green2.style.backgroundColor="rgb(0,255,0)";
}
else {
    green2.style.backgroundColor="#404040";
}

if(i==3) {
    blue3.style.backgroundColor="rgb(0,0,255)";
}
else {
    blue3.style.backgroundColor="#404040";
}

if(i==4) {
    white4.style.backgroundColor="#FFFFFF";
}
else {
    white4.style.backgroundColor="#404040";
}

if(i==5) {
    orange5.style.backgroundColor="#FFA500";
}
else {
    orange5.style.backgroundColor="#404040";
}

}

var i = 0
var C_on = true

for(i=0; C_on; i++) {

tInterval()

if(i==6) { i=0 }
}

</script>

</html>

Answer 1

It looks like most of your problems are in handling setInterval . 看来您的大多数问题都在处理setInterval 。 setInterval will be called repeatedly, so you don't need to call it again. setInterval将被重复调用，因此您无需再次调用它。 Because of that, we also don't need your loop at the end. 因此，我们最后也不需要您的循环。 To test it press 'Run code snippet' at the bottom of the post. 要进行测试，请按文章底部的“运行代码段”。

I also took the liberty of cleaning it up. 我也有清理它的自由。 Some things that you should consider: 您应该考虑的一些事项：

<td class="tg-3as3" style="background-color:#404040";></td> Put the semicolon inside the style attribute, like so: <td class="tg-3as3" style="background-color:#404040;"></td> , otherwise it's invalid HTML. <td class="tg-3as3" style="background-color:#404040";></td>将分号放在style属性内，如下所示： <td class="tg-3as3" style="background-color:#404040;"></td> ，否则它是无效的HTML。
var i = 0 I suggest putting semicolons after all statements. var i = 0我建议在所有语句后加上分号。 See this post for why. 请参阅此帖子以了解原因。

 var yellow1 = document.getElementById("yellow1"); var green2 = document.getElementById("green2"); var blue3 = document.getElementById("blue3"); var white4 = document.getElementById("white4"); var orange5 = document.getElementById("orange5"); var i = 1; // Call setInterval once. It will run itself repeatedly. var t = setInterval(doSequence, 1500); function doSequence() { if (i == 1) { yellow1.style.backgroundColor = "rgb(255,255,0)"; } else { yellow1.style.backgroundColor = "#404040"; } if (i == 2) { green2.style.backgroundColor = "rgb(0,255,0)"; } else { green2.style.backgroundColor = "#404040"; } if (i == 3) { blue3.style.backgroundColor = "rgb(0,0,255)"; } else { blue3.style.backgroundColor = "#404040"; } if (i == 4) { white4.style.backgroundColor = "#FFFFFF"; } else { white4.style.backgroundColor = "#404040"; } if (i == 5) { orange5.style.backgroundColor = "#FFA500"; } else { orange5.style.backgroundColor = "#404040"; } // We don't need the loop because setInterval is already being called repeatedly. i++; if (i == 6) { i = 1; } }

 .tg { border-collapse: collapse; border-spacing: 0; } .tg td { font-family: Arial, sans-serif; font-size: 14px; padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; } .tg th { font-family: Arial, sans-serif; font-size: 14px; font-weight: normal; padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; }

 <body> <table id="lightboard" class="tg" style="table-layout: fixed; width: 526px"> <colgroup> <col style="width: 124px"></col> <col style="width: 129px"></col> <col style="width: 133px"></col> <col style="width: 140px"></col> </colgroup> <tr> <th class="tg-3as3" style="background-color:#404040;"></th> <th class="tg-3as3" style="background-color:#404040;"></th> <th class="tg-3as3" style="background-color:#404040;"></th> <th id="white4" class="tg-3as3" style="background-color:#404040;"></th> </tr> <tr> <td class="tg-3as3" style="background-color:#404040;"></td> <td id="yellow1" class="tg-3as3" style="background-color:#404040;"></td> <td class="tg-3as3" style="background-color:#404040;"></td> <td class="tg-3as3" style="background-color:#404040;"></td> </tr> <tr> <td id="blue3" class="tg-3as3" style="background-color:#404040;"></td> <td class="tg-3as3" style="background-color:#404040;"></td> <td id="green2" class="tg-3as3" style="background-color:#404040;"></td> <td class="tg-3as3" style="background-color:#404040;"></td> </tr> <tr> <td class="tg-3as3" style="background-color:#404040;"></td> <td id="orange5" class="tg-3as3" style="background-color:#404040;"></td> <td class="tg-3as3" style="background-color:#404040;"></td> <td class="tg-3as3" style="background-color:#404040;"></td> </tr> </table> </body>

循环更改表格单元格的颜色

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-04-21 20:37:37

循环更改表格单元格的颜色

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-04-21 20:37:37

解决方案1
0 已采纳 2015-04-21 20:37:37