在一段时间内用JavaScript改变HTML元素的背景颜色？ [英] Change background color of HTML elements with JavaScript in a certain time period?

问题描述

我有大约26个html元素，我希望在JavaScript中有以下效果：

有没有可能做出这样的事情？

我试图这样做：

  var j = 2000; （i = 1; i <= 26; i ++）{
 setInterval（function（）{document.getElementById（'Q'+ i）.style.backgroundColor ='＃00a300'}为
， j）条; 
 setInterval（function（）{document.getElementById（'Q'+ i）.style.color ='#FFFFFF'}，j）; 
 j = j + j; 
 setInterval（function（）{document.getElementById（'Q'+（i-1））。style.backgroundColor ='＃e1e1e1'}，j）; 
 setInterval（function（）{document.getElementById（'Q'+（i-1））。style.color ='＃666666'}，j）; 
} 
  

我是JavaScript的新手，从未使用过定时器。

解决方案

我使用jQuery.animate函数构建了一个小提琴示例，并使用jQuery颜色插件创建了背景色的淡入淡出动画。 >

请在这里找到小提琴： http://jsfiddle.net/ nafm74yd / 15 /

请注意，jsfiddle的左侧面板中使用了一个外部资源...它指向jQuery颜色插件它的CDN。

脚本是这样的：

 函数animate（idx）{
 $（$（'。block'）[idx]）。animate（{backgroundColor：＃ff0000}，200，function（）{
 var idx2 = idx; $ （$ {$。'block'）[idx2]）。animate（{backgroundColor：#ffffff}，200，function（）{}）; 
 if（idx> = $（' 。块'） .length  -  1）{
 setTimeout（animate（0），200）; 
} else setTimeout（animate（idx + 1），200）; 
}）; 
 
 
 $（document）.ready（function（）{
 animate（0）; 
}）; 
  

I have around 26 html elements for which I want the following effect in JavaScript:

Is it possible to make something like this?

I was trying to do it as follows:

var j = 2000;
        for (i = 1; i <= 26; i++) {
            setInterval(function() {document.getElementById('Q' + i).style.backgroundColor = '#00a300'}, j);
            setInterval(function() {document.getElementById('Q' + i).style.color = '#FFFFFF'}, j);
            j = j + j;
            setInterval(function() {document.getElementById('Q' + (i-1)).style.backgroundColor = '#e1e1e1'}, j);
            setInterval(function() {document.getElementById('Q' + (i-1)).style.color = '#666666'}, j);
        }

I am a novice with JavaScript and have never worked with timers.

解决方案

I have constructed a little fiddle example using jQuery.animate function, and jQuery color plugin to create fade animations of background color.

Please find the fiddle here: http://jsfiddle.net/nafm74yd/15/

Please notice there is one external resource used in the left hand panel of the jsfiddle... it points to the jQuery color plugin to its CDN.

the script is something like this:

    function animate(idx) {
        $($('.block')[idx]).animate({ backgroundColor: "#ff0000" }, 200, function () {
            var idx2 = idx;
            $($('.block')[idx2]).animate({ backgroundColor: "#ffffff" }, 200, function () {});
            if (idx >= $('.block').length - 1) {
                setTimeout(animate(0), 200);
            } else setTimeout(animate(idx + 1), 200);
        });
    }

    $(document).ready(function () {
        animate(0);
    });

这篇关于在一段时间内用JavaScript改变HTML元素的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！