一、js改变动态背景颜色
一个div来显示背景颜色，一个颜色框来输入16进制颜色值，一个按钮来激发事件。原本div背景色为白色，输入颜色值之后按按钮，div背景色会从当前颜色动画过渡到目标颜色。
点击后就是这样一个状态，但是截图没有动画效果，附上源代码：
（新浪博客贴出来的代码会给修改掉：
点这里下载：
http://dl.dbank.com/c09a4cadkv
）
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Color</title>
<style type="text/css">
body{ background:#CCCCCC;}
.color{ background-color:#ffffff; color:#000000; height:200px; width:300px;}
</style>
</head>
<body>
<div class="color" id="box"></div>
<form name="form">
<input type="text" name="input1"/>
<input type="button" value="变色" onclick="color()"/>
</form>
<script language="javascript">
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<array2[x])
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);
}
}
</script>
</body>
</html>
其主要功能都用函数来分割:
$(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动态修改背景颜色
三、 js实现的动态背景渐变
1、放置图片的div：
2、js设置时间
div高度可以自己改，宽度最大支持1680。