请问js如何动态改变一个对象的颜色？

问候你… 2012-08-07 03:47:24

比如说有一个宽200px 高200px的DIV 如何让他的背景颜色动态的变换、，本人新手请大虾们指点，多多感谢！

...全文

921 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

anglechengd 2012-08-13

打赏
举报

var colorArr=['#8A2BE2','#DEB887','#7FFF00','#008B8B','#FF1493'];这个确实只有四种颜色，所以在颜色上面数量上面有缺陷

问候你… 2012-08-12

打赏
举报

[Quote=引用 6 楼的回复:]

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="Edi……
[/Quote]

请问这句是什么意思啊？是不是只有4种颜色：var colorArr=['#8A2BE2','#DEB887','#7FFF00','#008B8B','#FF1493'];

问候你… 2012-08-12

打赏
举报

[Quote=引用 8 楼的回复:]

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="Edi……
[/Quote]

大虾这个方法真的很好但这段代码运行一会儿就会报错是不是哪里还有点小问题啊？

问候你… 2012-08-12

打赏
举报

[Quote=引用 5 楼的回复:]

每秒更新背景颜色随机
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>
<m……
[/Quote]

对不起啊大虾你写的太难了完全看不懂啊！！！

zhuzizuodesi 2012-08-10

打赏
举报

5楼的难懂，6 楼7楼的很好，楼主很幸福哦，一个问题能得到这么多方法。

如流风般凌乱 2012-08-09

打赏
举报

http://www.webjx.com/javascript/jsajax-17430.html

如流风般凌乱 2012-08-09

打赏
举报

http://www.webjx.com/javascript/jsajax-17430.html

anglechengd 2012-08-09

打赏
举报



<!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>

学习了7楼了的如何创建一个颜色库，将代码进行了修改

86y 2012-08-08

打赏
举报

每秒更新背景颜色随机



<!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>

isurgit 2012-08-08

打赏
举报

动态的变换。。指得是？

licip 2012-08-08

打赏
举报

你设置时间setInterval让它每隔时间执行一次。取颜色。

心态决定姿态 2012-08-08

打赏
举报



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>

anglechengd 2012-08-08

打赏
举报



<!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);

		function changeColor(){

			var div=document.getElementById('div1'); //获得div元素

			var colorArr=['#8A2BE2','#DEB887','#7FFF00','#008B8B','#FF1493']; //建立颜色库

			if(i==colorArr.length){ 

					i=0;

				}else{

					div.style.backgroundColor=colorArr[i++%colorArr.length]; //循环颜色

				}

			}

</script>

 <body>

  <div id="div1" style="width:200px;height:200px;border:1px solid gray;background:blue;"></div>

 </body>

</html>