Question

我有桌子需要每隔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++;
    }
}

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

Answer 1

您可以忽略while循环，而不是setInterval 如果有效，请尝试此操作

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

使用clearInterval停止更改

Answer 2

您需要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)

Answer 3

尝试使用setInterval()功能（http://www.w3schools.com/jsref/met_win_setinterval.asp）设置一个定时器，将定时调用该功能。

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

定时颜色更改HTML

3 个答案: