切換（或閃爍）表格中的特定單元格一段時間

我已經在Html中創建了一個表格，並且我希望使某個特定的單元格可以閃爍（打開和關閉）某種類型。請允許我知道是否可以使用JavaScript。切換（或閃爍）表格中的特定單元格一段時間

<html> 
    <body> 
    <h4>Two rows and three columns:</h4> 
     <table border="1" width="100%" height="400" align="top"> 
     <tr style="height: 1"> 
      <td> 
      <table width="100%" border="2" height ="100" align="top"> 
       <tr> 
       <td bgcolor="#FFFF00">1-1</td> <!-- R1C1 Yellow --> 
       <td>1-2</td> 
       </tr> 
       <tr> 
       <td>1-3</td> 
       <td>1-4</td> 
       </tr> 
      </table> 
      </td> 
      <td> 
      <table width="100%" border="2" height ="100" align="top"> 
       <tr> 
       <td>2-1</td> 
       <td>2-2</td> 
       </tr> 
       <tr> 
       <td>2-3</td> 
       <td>2-4</td> 
       </tr> 
      </table> 
      <td> 
      <table width="100%" border="2" height ="100" align="top"> 
       <tr> 
       <td>3-1</td> 
       <td>3-2</td> 
       </tr> 
       <tr> 
       <td>3-3</td> 
       <td>3-4</td> 
       </tr> 
      </table> 
     </td> 
     </tr> 
     <tr style="vertical-align: top"> 
     <td> 
      <table width="100%" border="2" height ="100"> 
       <tr> 
       <td>4-1</td> 
       <td>4-2</td> 
       </tr> 
       <tr> 
       <td>4-3</td> 
       <td>4-4</td> 
       </tr> 
      </table> 
     <td> 
      <table width="100%" border="2" height ="100"> 
       <tr> 
       <td>5-1</td> 
       <td>5-2</td> 
       </tr> 
       <tr> 
       <td>5-3</td> 
       <td>5-4</td> 
       </tr> 
      </table> 
      <td> 
      <table width="100%" border="2" height ="100"> 
       <tr> 
       <td>6-1</td> 
       <td>6-2</td> 
       </tr> 
       <tr> 
       <td>6-3</td> 
       <td>6-4</td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
    </table> 
    </body> 
</html>

在下面的圖像，說Row1和col 1，是否可能在JavaScript或HTML使它閃爍/眨眼黃色？由於 image file

UPDATE 我能夠閃細胞，但目前他們都隨機閃爍，雖然我有足夠的時間相同。但我希望他們所有人一起閃光（同時），然後再次閃光並關閉

來源

2012-03-08 m4n07

您可以創建一個javascript函數來更改所需單元格的背景顏色。此外，您可以使用setInterval（）函數在固定時間後調用該函數。

var flag = true; 
function changeColor() { 
    if(flag==true){ 
     document.getElementById("yourId").style.background="yourColor 1"; 
     flag=false; 
    } 
    else if (flag==false){ 
    document.getElementById("yourId").style.background="yourcolor 2"; 
    flag = true; 
    } 
} 
setInterval("changeColor()", timeinmillisec);

來源

2012-03-08 10:18:39

如果你有完整的示例，可以請你將它張貼，我非常新的JavaScript – m4n07 2012-03-08 10:45:14

這裏是代碼和演示你http://jsfiddle.net/HdX6t/ – 2012-03-08 10:58:40

可以請你解釋一下javascript函數在這裏被調用？ – m4n07 2012-03-08 11:37:46

如果您爲其指定一個ID，您可以使用setTimeout()在一段時間後改變其背景：

function changeColour() { 
    document.getElementById("myId").style.backgroundColor="yellow"; 
} 
setTimeout("changeColour()", 2000); // Turn it yellow in 2 seconds

我認爲你得到的一般想法，你可以改善上面的代碼，使其閃爍。

來源

2012-03-08 10:13:11 MMM

您可以使用setTimeout推遲某些代碼的執行幾毫秒。要獲得閃爍的行爲，可以將樣式設置爲當前不是的樣式（我在我的示例中設置了類，但您可以自由地以任何其他方式實現它），併爲此設置新的超時下一次改變。

My example。

var elapsed = 0; 
var interval = 250; 
var duration = 3000; 

function toggle(element) { 
    var newClass = element.className == 'highlight' ? '' : 'highlight'; 
    element.className = newClass; 
    elapsed += interval; 

    if(elapsed < duration) 
     setTimeout(function() { toggle(element); }, interval); 
} 

var element = document.getElementById('cell'); 
toggle(element);

在這裏，我使用的變量duration設置整個閃爍動畫所需的持續時間，elapsed跟蹤多久閃爍已經持續的（閾值進行比較，以duration），和interval設置每次閃光/切換之間的距離。

toggle函數將類名設置爲highlight，或者根據當前不存在的內容來設置交替行爲。鑑於duration未被超過，toggle被設置爲在interval毫秒後再次發射。

請注意，我正在使用getElementById來確定感興趣的單元格。如果這不適合你，你可以使用getElementsByTagName。例如，table.getElementsByTagName('tr')[0].getElementsByTagName('td')[2]將獲得表中第一行的第三列。

來源

2012-03-08 10:14:08

切換（或閃爍）表格中的特定單元格一段時間

回答

相關問題