Javascript如何更改计时事件的细胞颜色？

目前我正在学习JavaScript，我希望得到一个细胞闪烁黄色在基于时间的事件，似乎JavaScript的失败，每次我去的时间：当我的计时器达到5它Javascript如何更改计时事件的细胞颜色？

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

目前只是停止我猜测它在上面的代码行失败，因为当我删除它，定时器继续无限。

完整的JavaScript下面是相关的html。我想知道如何在不使用JavaScript库的情况下正确编辑单元格颜色。

这完全是这样，我可以学习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>

来源

2011-06-23 Anicho

你是怎么找到与“TXT”的ID元素？你也可以在你的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(); 
    } 

}

记得id，不class对TD的类更改为一个id这样

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

来源

2011-06-23 15:15:44

感谢这工作我一直在尝试做它在jsFiddle，但似乎是越野车使用.getElementByID我只是试图在我的桌面上的HTML页面，它似乎工作得很好:)。非常感谢您的帮助... – Anicho

doit应该是doTimer（），它确保按下按钮时我们不会收到任何不需要的操作。 – Anicho

为了得到一组类的元素，使用getElementsByClassName功能：

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

然后，您可以通过该组元素的循环和风格适用于他们，用style.backgroundColor：

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

见该工作here一个例子。

来源

2011-06-23 15:15:42

感谢如果我能接受两个答案，那么你的支持工作。 – Anicho

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

的document.all.foo语法得到元素。

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

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

来源

2011-06-23 15:18:52 Emmett

如果你想使用jQuery，那么它很简单..

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

请务必下载Timers和jQuery

来源

2011-06-23 15:28:24

感谢您的jquery答案感谢能够看到差异我正在学习纯JavaScript，然后才决定学习正常的jscript。 – Anicho

当你想要一个给定函数反复调用，例如每一秒，你应该使用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 
    } 
}

来源

2011-06-23 15:51:47 Luc125

Javascript如何更改计时事件的细胞颜色？

回答

相关问题