Javascript如何在计时事件上更改单元格颜色？

Question

I am currently learning JavaScript and I want to get a cell to blink yellow on a time based event, it seems the JavaScript fails every time I get to:

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

At the moment when my timer reaches 5 it just stops I am guessing it's failing on the above line of code as when I remove it, the timer continues infinitely.

The full JavaScript is below with the relevant html. I would like to know how to properly edit the cell bg colour over time without using a JavaScript library if possible.

This purely so I can learn JavaScript as a whole rather then using a library and not being able to understand the library when I need to make modification or plugin.

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> 

Answer 1

When you want a given function to be called repeatedly, for example every second, you should use the window.setInterval(code_or_function, milliseconds) method:

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
   }
}

Answer 2

To get a set of elements by class, use the getElementsByClassName function:

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

You can then loop through that set of elements and apply the style to them, using style.backgroundColor :

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

See an example of this working here .

Answer 3

How come your looking for and element with the id of "txt"? Also you're calling doIt in your setTimeout(doIt, 3000) you may want to change that to setTimeout("timedCount();", 3000);

Also document.all is IE only (Very Important)!

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();
  }

}

remember to change the class on the td to an id like this

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

Answer 4

The document.all.foo syntax gets elements by id , not class .

So it'll work if you change <td class="blinkyellow"> to <td id="blinkyellow"> .

Or better yet, use the more supported document.getElementById('blinkyellow') syntax.

Answer 5

If you do want to use jQuery, then it's simply..

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

Be sure to download Timers and jQuery