JS实现网页背景颜色与select框中颜色同时变化的方法

本文实例讲述了JS实现网页背景颜色与select框中颜色同时变化的方法。分享给大家供大家参考。具体实现方法如下：
复制代码代码如下:<！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=gb2312" />
<title>JS实现网页背景颜色与select框中的颜色同时变化</title>
</head>
<body>
<script language="javascript">
colors = new Array（"#FFFFFF","#FFCCFF","#FF99FF","#FF66FF","#FF33FF","#FF00FF","#FFFFCC","#FFCCCC","#FF99CC","#FF66CC","#FF33CC","#FF00CC","#FFFF99","#FFCC99","#FF9999","#FF6699","#FF3399","#FF0099","#FFFF66","#FFCC66","#FF9966","#FF6666","#FF3366","#FF0066","#FFFF33","#FFCC33","#FF9933","#FF6633","#FF3333","#FF0033","#FFFF00","#FFCC00","#FF9900","#FF6600","#FF3300","#FF0000","#CCFFFF","#CCCCFF","#CC99FF","#CC66FF","#CC33FF","#CC00FF","#CCFFCC","#CCCCCC","#CC99CC","#CC66CC","#CC33CC","#CC00CC","#CCFF99","#CCCC99","#CC9999","#CC6699","#CC3399","#CC0099","#CCFF66","#CCCC66","#CC9966","#CC6666","#CC3366","#CC0066","#CCFF33","#CCCC33","#CC9933","#CC6633","#CC3333","#CC0033","#CCFF00","#CCCC00","#CC9900","#CC6600","#CC3300","#CC0000","#99FFFF","#99CCFF","#9999FF","#9966FF","#9933FF","#9900FF","#99FFCC","#99CCCC","#9999CC","#9966CC","#9933CC","#9900CC","#99FF99","#99CC99","#999999","#996699","#993399","#990099","#99FF66","#99CC66","#999966","#996666","#993366","#990066","#99FF33","#99CC33","#999933","#996633","#993333","#990033","#99FF00","#99CC00","#999900","#996600","#993300","#990000","#66FFFF","#66CCFF","#6699FF","#6666FF","#6633FF","#6600FF","#66FFCC","#66CCCC","#6699CC","#6666CC","#6633CC","#6600CC","#66FF99","#66CC99","#669999","#666699","#663399","#660099","#66FF66","#66CC66","#669966","#666666","#663366","#660066","#66FF33","#66CC33","#669933","#666633","#663333","#660033","#66FF00","#66CC00","#669900","#666600","#663300","#660000","#33FFFF","#33CCFF","#3399FF","#3366FF","#3333FF","#3300FF","#33FFCC","#33CCCC","#3399CC","#3366CC","#3333CC","#3300CC","#33FF99","#33CC99","#339999","#336699","#333399","#330099","#33FF66","#33CC66","#339966","#336666","#333366","#330066","#33FF33","#33CC33","#339933","#336633","#333333","#330033","#33FF00","#33CC00","#339900","#336600","#333300","#330000","#00FFFF","#00CCFF","#0099FF","#0066FF","#0033FF","#0000FF","#00FFCC","#00CCCC","#0099CC","#0066CC","#0033CC","#0000CC","#00FF99","#00CC99","#009999","#006699","#003399","#000099","#00FF66","#00CC66","#009966","#006666","#003366","#000066","#00FF33","#00CC33","#009933","#006633","#003333","#000033","#00FF00","#00CC00","#009900","#006600","#003300","#000000"）;
function show（file）{
var url = file.options[file.selectedIndex].value;
if（document.all || document.layers）
   location.href = url;
else if（document.getElementById）{
   if（url ！= undefined）
    location.href = url;
}
}
var streng;
var color1 = colors[Math.round（Math.random（） * （colors.length-1））];
var color2 = colors[Math.round（Math.random（） * （colors.length-1））];
var color3 = colors[Math.round（Math.random（） * （colors.length-1））];
streng = "<style type="text/css">select{width:300; height:118; overflow:hidden; font-family:times new roman; font-size: 14px; color:";
streng += color1;
streng += "; background:";
streng += color2;
streng += ";}body{background: ";
streng += color3;
streng += ";}td{font-family: times new roman; font-size: 14px; color: #000000;}</style>";
document.writeln（streng）;
</script>
<table border="0" cellspacing="0" cellpadding="0" width="500">
<form name="form" target="_blank">
<tr>
<td>
<select name="showoff" id="showoff" size="3" width="200" onChange="show（document.form.showoff）">
   <option value="http://www.163.com">163网易</option>
   <option value="http://www.baidu.com">百度搜索</option>
</select>
</td>
</tr>
</form>
</table>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。