JS: The method for changing the color of the webpage background and the color of the select box at the same time. js background color
This example describes how to change the background color of a webpage in JavaScript and the color in the select box at the same time. Share it with you for your reference. The specific implementation method is as follows:
Copy codeThe Code is as follows: <! 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 allows the background color of the webpage to change at the same time as the color in the select box </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', '# ffff0000 ', '# ffcc00',' # FF9900 ',' # FF6600 ',' # FF3300 ',' # FF0000 ',' # ccffff', '# ccccff',' # CC99FF ', '# CC66FF', '# CC33FF', '# CC00FF', '# ccffcc',' # cccccccc', '# CC99CC', '# CC66CC', '# CC33CC ', '# cc00cc',' # ccff99', '# CC9999', '# CC9999', '# CC6699', '# CC3399', '# cc0099',' # CCFF66 ', '# cc6666',' # CC9966 ',' # CC6666 ',' # CC3366 ',' # CC0066 ',' # CCFF33 ',' # cccc33', '# CC9933 ', '# CC6633', '# CC3333', '# CC0033', '# CCFF00', '# CCCC00', '# CC9900', '# CC6600', '# CC3300 ', '# cc000000',' # 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 ',' # 333333ff ',' # 3300FF ',' # 33FFCC ', '# 33cccccc',' # 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 Netease </option>
<Option value = "http://www.baidu.com"> Baidu search </option>
</Select>
</Td>
</Tr>
</Form>
</Table>
</Body>
</Html>
I hope this article will help you design javascript programs.