Question

html网页怎么让网页上某个div的背景定时自动切换？

如图，黑色部分为两个div，现在想实现让大的黑色div的背景定时切换，应该怎么做？代码…………请详细点，我也查了，按照那些代码好像实现不了啊？

Answer 1

可以用定时器setInterval

如果是有限的背景色切换，那把这些颜色放在一个数组里面，一秒切换一次

var arrColor=['green','red','blue'];
var i=0;
setInterval(function(){
    obj.style.backgroundColor=arrColor[i];
    if(i==arrColor.length-1) i=0;
    i++;
},1000);

如果是随机变颜色，我这里写了一个随机颜色的方法

function randomColor() {
var Str=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var color="#";
for(var i=0;i<6;i++)
{
var index=Math.ceil(Math.random()*Str.length);
color+=Str[index];
}
return color;
}

你可以参考一下

Answer 2

var g_background_colors = ["#f00","#0f0","#00f","#0ff"];
var g_current_color_idx = 0;

function switch_background(){
if(g_current_color_idx ==g_background_colors.length-1){
g_current_color_idx = 0;

}else{
g_current_color_idx ++;

}
document.getElementById("black_div_id").style.backgroundColor= g_background_colors[g_current_color_idx];
}
}

window.onload = function(){
setInterval(switch_background, 5000);

}

每隔5S切换一种颜色，大致代码是这样的。你可以参考一下。