切换（或闪烁）表格中的特定单元格一段时间

我已经在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

切换（或闪烁）表格中的特定单元格一段时间

回答

相关问题