JS实现点击颜色块切换指定区域背景颜色的方法
本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法。分享给大家供大家参考。具体实现方法如下：
<html>
<head>
<title>JS实现点击颜色块切换指定区域的背景颜色</title>
</head>
<body>
<divalign="center">
<tablebgcolor=#F8F8F8border="0"width="500"cellpadding="0"style="border-collapse:collapse"height="180"id="bb1">
<tr>
<tdcolspan="2">
<divalign="center">
<tableborder="0"width="90%"cellpadding="0"style="border-collapse:collapse"height="90"id="table2">
<tr><tdstyle="line-height:150%"><spanstyle="font-size:14px">适时切换网页指定区域背景颜色</span></td>
</tr></table>
</div>
</td>
</tr></table></div>
<divalign="center">
<tableborder="0"width="500"cellpadding="0"style="border-collapse:collapse"height="20"id="table1">
<tr><tdwidth="219"><palign="right"><fontcolor="#808080"><spanstyle="font-size:9pt">请选择背景：</span></font></td>
<tdwidth="281"><divalign="center"><tableborder="1"width="240"cellspacing="0"cellpadding="0"height="20"id="table1"style="border-collapse:collapse"bordercolor="#FFFFFF">
<tr>
<tdwidth="60"onClick="bb1.style.backgroundColor='FDFDF0';set_color('FDFDF0')"bgcolor="#FDFDF0"></td>
<tdonClick="bb1.style.backgroundColor='B1D5F3';set_color('B1D5F3')"bgcolor="#B1D5F3"width="60"></td>
<tdonClick="bb1.style.backgroundColor='B4E7D9';set_color('B4E7D9')"bgcolor="#B4E7D9"width="60"></td>
<tdonClick="bb1.style.backgroundColor='F1E8FF';set_color('F1E8FF')"bgcolor="#F1E8FF"width="60"></td>
<tdonClick="bb1.style.backgroundColor='E8FFF3';set_color('E8FFF3')"bgcolor="#E8FFF3"width="60"></td>
<tdonClick="bb1.style.backgroundColor='CDCDDE';set_color('CDCDDE')"bgcolor="#CDCDDE"width="60"></td>
</tr>
</table>
</div></td></tr></table>
</div>
<scriptlanguage=javascript>
functionget_cookie(name_to_get){
varcookie_pair varcookie_name varcookie_value varcookie_array=document.cookie.split(";") for(counter=0;counter<cookie_array.length;counter++){ cookie_pair=cookie_array[counter].split("=") cookie_name=cookie_pair[0] cookie_value=cookie_pair[1] if(cookie_name==name_to_get){ returnunescape(cookie_value) } } returnnull } varbg_color=get_cookie("bgColor_cookie") functionset_color(color_val){ set_cookie("bgColor_cookie",color_val,365,"/") }
functionset_cookie(cookie_name,cookie_value,cookie_expire,cookie_path,cookie_domain,cookie_secure){ varcookie_string=cookie_name+"="+cookie_value if(cookie_expire){ varexpire_date=newDate() varms_from_now=cookie_expire*24*60*60*1000 expire_date.setTime(expire_date.getTime()+ms_from_now) varexpire_string=expire_date.toGMTString() cookie_string+=";expires="+expire_string }
if(cookie_path){ cookie_string+=";path="+cookie_path } if(cookie_domain){ cookie_string+=";domain="+cookie_domain } if(cookie_secure){ cookie_string+=";true" } document.cookie=cookie_string } if(bg_color){ bb1.style.backgroundColor=bg_color } </script> </body> </html>