堆棧內存溢出
  簡體   English   中英

循環更改表格單元格的顏色

[英]Changing Colour of table Cells in a Loop

 原文  2015-04-21 19:53:10  4   1    javascript/ html

問題描述

基本上我想創建一個4x4表格的lightboard，該表格可以按順序更改某些單元格的背景顏色

它應先經過黃色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>

1 個解決方案

解決方案1
 0 已采納  2015-04-21 20:37:37

看來您的大多數問題都在處理setInterval 。 setInterval將被重復調用，因此您無需再次調用它。 因此，我們最后也不需要您的循環。 要進行測試，請按文章底部的“運行代碼段”。

我也有清理它的自由。 您應該考慮的一些事項：

  • <td class="tg-3as3" style="background-color:#404040";></td>將分號放在style屬性內，如下所示： <td class="tg-3as3" style="background-color:#404040;"></td> ，否則它是無效的HTML。
  • var i = 0我建議在所有語句后加上分號。 請參閱此帖子以了解原因。 

 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用While循環更改背景顏色 更改表格中特定索引的顏色 更改表格單元格的內容 使用Javascript更改表格行的背景色 單擊時更改字形+表格標題顏色更改 更改表格行的顏色加載 如果依賴於表格單元格，則更改表格單元格的顏色 在整個HTML表格中更改特定單詞的顏色 使用php和js更改表格單元格中文本的顏色 為從 javascript 數組創建的某些表格單元格着色
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM