<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="改变DIV颜色" id="btn" />
<div style="300px;height:300px;border:1px solid while; " id="d"><span id="span1"></span></div>
</body>
</html>
<script>
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("d");
var oSpan1 = document.getElementById("span1");
var g = 0;
function rand( min,max ){
return Math.round( Math.random()*(max-min) + min )
}
oBtn.onclick = function(){
var arr = ["red","blue","green","pink","yellow"];
for( var i = 0 ; i < 1 ; i++ ){
g = rand( 0,4 );
if( g == 0 ){
oDiv.style.backgroundColor = "red";
oSpan1.innerHTML = "red";
}else if( g==1 ){
oDiv.style.backgroundColor = "blue";
oSpan1.innerHTML = "blue";
}else if( g==2 ){
oDiv.style.backgroundColor = "green";
oSpan1.innerHTML = "green";
}else if( g==3 ){
oDiv.style.backgroundColor = "pink";
oSpan1.innerHTML = "pink";
}else{
oDiv.style.backgroundColor = "yellow";
oSpan1.innerHTML = "yellow";
}
// switch( g ){
// case 0 : oDiv.style.backgroundColor = "red" && oSpan.innerHTML = "red";
// case 1 : oDiv.style.backgroundColor = "blue" && oSpan.innerHTML = "blue";
// case 2 : oDiv.style.backgroundColor = "green" && oSpan.innerHTML = "green";
// case 3 : oDiv.style.backgroundColor = "pink" && oSpan.innerHTML = "pink";
// case 4 : oDiv.style.backgroundColor = "yellow" && oSpan.innerHTML = "yellow";
// }
}
// var brr = [];
// var g = 0;
// for( var i = 0 ; i < 5 ; i++ ){
// g = rand( 0,5 );
// brr.push( arr[g] );
// }
// return brr;
}
//
// oBtn.onclick = function(){
//
// oDiv.style.backgroundColor = "blue";
// oDiv.style.backgroundColor = "green";
// oDiv.style.backgroundColor = "pink";
// oDiv.style.backgroundColor = "yellow";
// }
</script>
<!--red blue green pink yellow-->
<!--function getColor(){
var str = ["red","blue","green","pink","yellow"];
var color = "#";
for( var i = 0 ; i < 1 ; i++ ){
color += str.charAt( rand(0,4) );//根据随机下标得到对应的字符
}
return color;
}-->