Javascript如何更改计时事件的单元格颜色？答案

【问题标题】：Javascript how to change cell colour on timing event?Javascript如何更改计时事件的单元格颜色？
【发布时间】：2016-11-29 19:29:37
【问题描述】：

我目前正在学习 JavaScript，我想让一个单元格在基于时间的事件上闪烁黄色，似乎每次我到达时 JavaScript 都会失败：

document.all.blinkyellow.bgColor = "yellow";

当我的计时器达到 5 时它就停止了我猜它在上面的代码行中失败了，因为当我删除它时，计时器会无限继续。

下面是完整的 JavaScript 以及相关的 html。如果可能的话，我想知道如何在不使用 JavaScript 库的情况下随着时间的推移正确编辑单元格 bg 颜色。

这纯粹是为了让我可以整体学习 JavaScript，而不是使用库，并且在我需要进行修改或插件时无法理解库。

Javascript：

var count=0;
var time;
var timer_is_on=0;
setTimeout(doIt, 3000);

function timedCount()
{
    if(count == 6){    

    document.all.blinkyellow.bgColor = "yellow";

    }
document.getElementById('txt').value=count;

count=count+1;
time=setTimeout("timedCount()",1000);

}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }

}

HTML：

<table> 
 <tbody> 
  <tr> 
   <td>Col 1</td> 
   <td>Col 2</td> 
   <td>Col 3</td>
   <td>Col 3</td>
  </tr> 
  <tr> 
   <td class="blinkyellow">Col 1</td> 
   <td>Col 2</td> 
   <td>Col 3</td>
   <td>Col 3</td>   
  </tr> 
  <tr> 
   <td>Col 1</td> 
   <td>Col 2</td> 
   <td>Col 3</td>
   <td>Col 3</td>   
  </tr>
  <tr> 
   <td>Col 1</td> 
   <td>Col 2</td> 
   <td>Col 3</td>
   <td>Col 3</td>
  </tr> 
 </tbody> 
</table>

【问题讨论】：

标签： javascript html html-table

【解决方案1】：

当您希望重复调用给定函数时，例如每秒，你应该使用window.setInterval(code_or_function, milliseconds) 方法：

var count = 0;
var interval = setInterval(timedCount, 1000);

function timedCount() {
   count++;
   document.getElementById("txt").value = count;
   if (count == 6) {
       document.getElementById("blinkyellow").style.backgroundColor = "yellow";
       window.clearInterval(interval);  // Stops the timer
   }
}

【讨论】：

【解决方案2】：

你是怎么找 id 为“txt”的元素的？此外，您在 setTimeout(doIt, 3000) 中调用 doIt，您可能希望将其更改为 setTimeout("timedCount();", 3000);

而且 document.all 也只是 IE（非常重要）！

var count=0;
var time;
var timer_is_on=0;
setTimeout("timedCount();", 3000);

function timedCount()
{
    if(count == 6){    

    document.getElementById('blinkyellow').style.backgroundColor = "yellow";

    }

count=count+1;
time=setTimeout("timedCount()",1000);

}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }

}

记得把td上的class改成这样的id

<td id="blinkyellow">Col 1</td>

【讨论】：

感谢这项工作我一直在尝试在 jsFiddle 中执行此操作，但是在使用 .getElementByID 时似乎有问题我只是在我桌面上的 html 页面上尝试过它，它似乎工作得很好:) .非常感谢您的帮助...
doit 应该是 doTimer() ，它只是确保按下按钮时我们不会得到任何不需要的操作。

【解决方案3】：

要按类获取一组元素，请使用getElementsByClassName 函数：

var elements = document.getElementsByClassName("blinkYellow");

然后您可以使用style.backgroundColor 循环遍历该组元素并将样式应用于它们：

for(var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "yellow";
}

查看此工作的示例here。

【讨论】：

感谢您的支持，如果我能接受两个答案，我会接受。
@Anicho - 没问题！请记住，如果您使用getElementById 与多个共享相同id 的元素，您可能会遇到问题。在这种情况下，您将不得不使用class，就像我在这里所做的那样。

【解决方案4】：

document.all.foo 语法通过id 获取元素，而不是class。

因此，如果您将<td class="blinkyellow"> 更改为<td id="blinkyellow">，它将起作用。

或者更好的是，使用 more supported document.getElementById('blinkyellow') 语法。

【讨论】：

【解决方案5】：

如果你确实想使用 jQuery，那很简单..

$(document).ready(
    function() 
    {
        $(this).oneTime(
            3000, 
            function() 
            {
                $('.blinkyellow').css('background-color', 'yellow');
            }
        );
    }
);

一定要下载Timers和jQuery

【讨论】：

感谢 jquery 的回答，感谢能够在我决定学习普通 jscript 之前看到我学习纯 JavaScript 的不同之处。