0

我有一张桌子需要每 3 秒换一次颜色。我写了一个函数，可以改变一次颜色，但不知道如何间隔。

HTML表格代码

<tr id="contacts_row<?php echo $i; ?>" class="row">
   <td><?php echo $row_color_test['fname'] . " " . $row_color_test['lname'] ; ?></td>
   <td><?php echo $row_color_test['phone']; ?></td>
</tr>

一次改变颜色的功能

function changeColor(color)
{
    var list = document.querySelectorAll(".row");
    var index;
    for (index = 0; index < list.length; ++index) {
        list[index].style.color = color;
    }
}

我尝试了以下哪些工作

var array = new Array("violet","indigo","blue","green","yellow","orange","red");


function intervalChange()
{
   var counter=0;
   while(counter<7)
    {
       changeColor(array[counter]);
       counter++;
    }
}

我做错了什么还是有更好的解决方案？

4

3 回答 3

3

您可以忽略 while 循环，setInterval 如果可行，则选择 Try This

function intervalChange()
{
    var int=setInterval(function()
        {
            changeColor(array[counter]);
            counter++;
            if(counter==6){ counter=0; }
        },3000);
}

使用 clearInterval 停止更改

于 2013-07-08T13:15:38.997 回答
1

您需要setInterval方法。这将允许在给定的时间间隔调用一个函数，直到被取消。

var myRecurringFunction = function(){ console.writeLine("Hello World"); }
var clearVariable = setInterval(myRecurringFunction, 2000); // 2000 miliseconds = 2 seconds

每 2 秒myRecurringFunction将调用一次。

如果由于某种原因需要停止计时器，它就像clearInterval方法一样简单。

clearInterval(clearVariable);

这是一个 JSFiddle，对您的代码进行了一些修改：http: //jsfiddle.net/qzUCP/

function changeColor(color)
{
    var list = document.querySelectorAll(".row");
    var index;
    for (index = 0; index < list.length; ++index) {
        list[index].style.color = color;
    }
}

var array = new Array("violet","indigo","blue","green","yellow","orange","red");
var currentColorIndex = 0;

function intervalChange() {
    if(currentColorIndex >= array.length) currentColorIndex = 0;
    changeColor(array[currentColorIndex]);
    currentColorIndex++;
}

setInterval(intervalChange, 3000)
于 2013-07-08T13:21:25.373 回答
0

尝试使用该setInterval()函数 ( http://www.w3schools.com/jsref/met_win_setinterval.asp ) 设置一个计时器，该计时器将调用该函数进行着色。

Mayur 的答案是完美的，除了让它每 3 秒运行一次，将 2000 更改为 3000。那是毫秒，所以你想要 3000。

于 2013-07-08T13:17:29.057 回答