html动态显示背景颜色,js动态修改背景颜色方法汇总

本文介绍了js动态修改背景颜色的多个方法，如何用javascript控制或修改网页背景呢，这需要用到javascript操作鼠标事件及css样式的方法。

一、js改变动态背景颜色

一个div来显示背景颜色，一个颜色框来输入16进制颜色值，一个按钮来激发事件。原本div背景色为白色，输入颜色值之后按按钮，div背景色会从当前颜色动画过渡到目标颜色。

点击后就是这样一个状态，但是截图没有动画效果，附上源代码：

(新浪博客贴出来的代码会给修改掉：

getElementByIdx_x (id); 多了“x_x”；

string.substr(array[x] ,1); 少了“% 16”；

例子：

代码示例:

Color

body{ background:#CCCCCC;}

.color{ background-color:#ffffff; color:#000000; height:200px; width:300px;}

function $(id){

return document.getElementByIdx_x_x_x_x (id);

}

function gs(obj,name){

return (obj.currentStyle)?obj.currentStyle[name]:window.getComputedStyle(obj,null)[name];

}

function h2rgb(h){

var string="0123456789abcdef";

var array=new Array(3);

for(var x=0;x<3;x++){

array[x]=h.slice(x*2,x*2+2);

var i=array[x].slice(0,1);

var j=array[x].slice(1);

array[x+3]=string.indexOf(i)*16+string.indexOf(j);

}

return array.slice(3,6);

}

function rgb2h(array){

var string="0123456789abcdef";

var h="";

for(var x=0;x<3;x++){

h+=string.substr(Math.floor(array[x]/16),1)+string.substr(array[x] ,1);

}

return h;

}

function change(array,array2){

var key=5;

var step=new Array(3);

for(var x=0;x<3;x++){

//step[x]=array[x]+Math.ceil((array2[x]-array[x])/5);

if(array2[x]-array[x]>0&&array[x]+key

step[x]=array[x]+key;

else if(array2[x]-array[x]<0&&array[x]-key>array2[x])

step[x]=array[x]-key;

else

step[x]=array2[x];

}

return step;

}

function color(){

var timer;

if(!$("box").currentStyle){

var array=gs($("box"),"backgroundColor").slice(4,-1).split(",");//split后字符数组

array=h2rgb(rgb2h(array));

}

else{

var array=h2rgb(gs($("box"),"backgroundColor").slice(1));

}

var array2=h2rgb(document.form.input1.value);

if((array[0]!=array2[0])||(array[1]!=array2[1])||(array[2]!=array2[2])){

$("box").style.backgroundColor="#"+rgb2h(change(array,array2));

clearTimeout(timer);

timer=setTimeout(color,100);

}

else{

clearTimeout(timer);

$("box").style.backgroundColor="#"+rgb2h(array2);

}

}

其主要功能都用函数来分割:

$(id)用id获取元素；

gs(obj,name)根据对象获取元素样式；

h2rgb(h)16进制颜色值转换成rgb颜色值用数字型数组返回；

rgb2h(array)rgb颜色值转换成16进制颜色值用字符串形式返回；

change(array,array2)将原颜色值array转换到目标颜色array2,key可以动画变换速度；

color()获取当前颜色以及目标颜色后调用change(array,array2)同时递归产生动画。

兼容FF,IE6/7/8，其中兼容点有：

1、FF跟IE获取样式表

2、FF得到的颜色值为RGB,而IE得到的却是十六进制字符串

二、javascript动态修改背景颜色

代码示例:

Background Color Changer

Set the background color

onclick = "BG_yellow()">

onclick = "BG_thistle()">

onclick = "BG_plum()">

onclick = "BG_red()">

三、 js实现的动态背景渐变

1、放置图片的div：

代码示例:

2、js设置时间

代码示例:

window.onload = function () {

var scrollBackground = {

object: document.getElementById("scrollBackground"),

endTop: 3657,

nowTop: 0

};

var scrollInterval = setInterval(function () {

scrollBackground.nowTop = (scrollBackground.nowTop != scrollBackground.endTop) ? (scrollBackground.nowTop + 1) : 0;

scrollBackground.object.style.backgroundPosition = "0px -" + scrollBackground.nowTop + "px";

}, 50);

}

div高度可以自己改，宽度最大支持1680。