Question

基本上我想创建一个4x4表格的灯板，它会按顺序改变某些单元格的背景颜色

它应该变为黄色1，绿色2，蓝色3，白色4，橙色5然后变回黄色等等以进行无限循环。

到目前为止我有这个代码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

看起来您的大多数问题都在处理setInterval。 setInterval将被重复调用，因此您无需再次调用它。因此，我们最后也不需要你的循环。要测试它，请按“运行代码段”＆＃39;在帖子的底部。

我也冒昧地清理它。你应该考虑的一些事情：

<td class="tg-3as3" style="background-color:#404040";></td>将分号放在样式属性中，如下所示：<td class="tg-3as3" style="background-color:#404040;"></td>，否则它是无效的HTML。
var i = 0我建议在所有陈述后加上分号。有关原因，请参阅this post。

＆＃13;

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;
  }
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: