首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

请教js怎么动态改变一个对象的颜色

2012-09-08 
请问js如何动态改变一个对象的颜色?比如说有一个宽200px 高200px的DIV如何让他的背景颜色动态的变换、,本人

请问js如何动态改变一个对象的颜色?
比如说 有一个宽200px 高200px的DIV 如何让他的背景颜色动态的变换、,本人新手 请大虾们指点,多多感谢!

[解决办法]
获取那个div,
然后div.style.backgroundColor='rgb('+red+','+green+','+blue+')';
控制red,green,blue的值来改变div的颜色。
[解决办法]
每秒更新背景颜色随机

HTML code
<!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>动态改变背景色</title></head><body><div style="width:200px;height:200px;display:block;background:#f60;" id="add">    </div></body><script>function Dec2Any(str,num){    if(!/\d+/.test(str)) return NaN;    if(!/\d+/.test(num)) return NaN;    var num=eval(num);    if(num>36 || num<2) return NaN;    var the_str="0123456789abcdefghijklmnopqrstuvwxyz";    var str=eval(str);    var residue=0;    var result="";    while(true){        residue=str%num;        result = the_str.charAt(residue) + result;        if(str<num) break;        str=Math.floor(str/num);    }    return(result);}function GetRandomNum(Min,Max){    var Range = Max - Min;    var Rand = Math.random();    return(Min + Math.round(Rand * Range));}function GetHex(){    var the_Hex = Dec2Any(GetRandomNum(0,255),16);    if(the_Hex.length==1) the_Hex = "0" + the_Hex;    return the_Hex;}function GetHexColor(){    return GetHex() + GetHex() +GetHex();} function chcolor(){    document.getElementById("add").style.background="#"+GetHexColor();}setInterval("chcolor()",1000);//每1称执行一次</script></html>
[解决办法]
JScript code
var auto=setInterval(function(){$("div").css("backgroundColor","#"+randomcolor());},1000);function randomcolor(){    var str=Math.ceil(Math.random()*16777215).toString(16);       if(str.length<6){        str="0"+str;       }       return str;    }<div style='width:200px;height:200px'></div>
[解决办法]
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content=""> </head><script type="text/javascript">            var i=0;    setInterval('changeColor()',500);    //var str=Math.ceil(Math.random()*16777215).toString(16);         function changeColor(){            var div=document.getElementById('div1'); //获得div元素            var color="#"+Math.ceil(Math.random()*16777215).toString(16); //建立颜色库                             div.style.backgroundColor=color //循环颜色                            }</script> <body>  <div id="div1" style="width:200px;height:200px;border:1px solid gray;background:blue;"></div> </body></html> 

热点排行