选择Select下拉框颜色改变网页背景色特效

发布时间：2018-08-13 14:07:08 所属栏目：活动来源：站长网

导读：一款貌似港澳台同胞写的代码，因为示例中的中文是繁体的，估计是练手用的，写出的下拉框竟然没有向下箭头，只有用鼠标点击时才会出现下拉列表的颜色，选择其中一个颜色，点击后边的确定就可以改变网页颜色了，只是不能写入cookie保存访客的设定。示例： !

　　一款貌似港澳台同胞写的代码，因为示例中的中文是繁体的，估计是练手用的，写出的下拉框竟然没有向下箭头，只有用鼠标点击时才会出现下拉列表的颜色，选择其中一个颜色，点击后边的确定就可以改变网页颜色了，只是不能写入cookie保存访客的设定。

　　示例：

<!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=big5"> <title>徹底無下拉箭頭的Select選框</title> </head> <body> 徹底無下拉箭頭的Select選框支持IE-<b>Firefox</b>-<b>Chrome</b><br><br> <select style="position:absolute;clip: rect(3px 30px 18px 3px);"> <script language="<b>Java</b>Script"> for (i=1; i<13; i++) document.write('<option>'+i+'月</option>') //--> </script> </select><br> <br> <script type="text/javascript"> function get_cookie(name) { search=name + "=" if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset >= 0) { offset += search.length end = document.cookie.indexOf(";", offset) if (end == -1) end=document.cookie.length return unescape(document.cookie.substring(offset, end)) } } return null } function setcolor() { choice=document.back.colar.selectedIndex new_colar=document.back.colar.options[choice].value document.bgColor= new_colar document.cookie= "backgroundcolor=" + new_colar } if (get_cookie("backgroundcolor")!="") document.bgColor=get_cookie("backgroundcolor") </script> <form name="back" size="0"> <select name="colar" onclick="color()" style="position:absolute;clip: rect(3px 95px 18px 3px);font-size:12px"> <option>--默認背景顏色--</option> <option value="#66aaff" style="background-color: #66aaff">33333</option> <option value="#dddddd" style="background-color: #dddddd"></option> <option value="blue" style="background-color: blue"></option> <option value="skyblue" style="background-color: skyblue"></option> <option value="#aaccff" style="background-color: #aaccff"></option> <option value="green" style="background-color: green"></option> <option value="#33dd33" style="background-color: #33dd33"></option> <option value="#80ff80" style="background-color: #80ff80"></option> <option value="#ccffcc" style="background-color: #ccffcc"></option> <option value="orange" style="background-color: orange"></option> <option value="#ffccdd" style="background-color: #ffccdd"></option> <option value="silver" style="background-color: silver"></option> <option value="yellow" style="background-color: yellow"></option> <option value="#eabe83" style="background-color: #eabe83"></option> <option value="#cccc66" style="background-color: #cccc66"></option> <option value="#777777" style="background-color: #777777"></option> <option value="#555555" style="background-color: #555555"></option> <option value="#222222" style="background-color: #222222"></option> </option> </select> <input type="button" value="確定" onClick="setcolor()" style="position:absolute;left:130px;width:40px;height:18px"> </form> <br><br> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!