 |
热门文章 |
|
|
|
|
| 无下拉箭头的Select下拉框，实现网页背景切换 |
| 来源：源码爱好者 更新时间：2011/10/31 22:18:24 阅读次数： 我要投稿 |
|
<!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-Firefox-Chrome<br><br>
<select style="position:absolute;clip: rect(3px 30px 18px 3px);">
<script language="JavaScript">
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> |
| 特效说明： |
一种比较笨的更换网页背景色的方法，实际上本例是想表达如何彻底生成一个无下拉箭头的Select选择框，且支持火狐、Chrome等众多主流浏览器，源代码分享给大家参考学习。 |
|
| 上一篇文章： 一款Input文字输入效果下一篇文章： Js实现点击添加增加一行，点击删除则删除一行 |
|
|
|
注册 登录
