请教js怎么动态改变一个对象的颜色-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20610 次

请问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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>