Question

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

更新我能够闪现细胞，但目前所有细胞都是随机闪烁的，尽管我有时间一样。但我希望他们所有人一起闪光（同时）然后熄灭，然后又闪光然后熄灭

Answer 1

您可以使用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]将获取表格中第一行的第三列。

Answer 2

您可以创建一个更改所需单元格背景颜色的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);

Answer 3

如果您为其指定了ID，则可以使用setTimeout()在一段时间后更改背景：

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

我认为你得到了一般的想法，你可以改进上面的代码使它眨眼。

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

3 个答案: