This article describes the method of JS to switch the background color of the specified area by clicking on the color block. Share it for your reference. The specific implementation method is as follows:
Copy the code as follows: <html>
<head>
<title>JS realizes clicking on the color block to switch the background color of the specified area</title>
</head>
<body>
<div align="center">
<table bgcolor=#F8F8F8 cellpadding="0" style="border-collapse: collapse" id="bb1">
<tr>
<td colspan="2">
<div align="center">
<table cellpadding="0" style="border-collapse: collapse" id="table2">
<tr><td style="line-height: 150%"><span style="font-size: 14px">Switch the background color of the specified area of the web page in time</span></td>
</tr></table>
</div>
</td>
</tr></table></div>
<div align="center">
<table cellpadding="0" style="border-collapse: collapse" id="table1">
<tr><td><p align="right"><font color="#808080"><span style="font-size: 9pt">Please select the background: </span></font></td>
<td><div align="center"><table cellpacing="0" cellpadding="0" id="table1" style="border-collapse: collapse" bordercolor="#FFFFF">
<tr>
<td onClick="bb1.style.backgroundColor='FDFDF0';set_color('FDFDF0')" bgcolor="#FDFDF0"></td>
<td onClick="bb1.style.backgroundColor='B1D5F3';set_color('B1D5F3')" bgcolor="#B1D5F3"></td>
<td onClick="bb1.style.backgroundColor='B4E7D9';set_color('B4E7D9')" bgcolor="#B4E7D9"></td>
<td onClick="bb1.style.backgroundColor='F1E8FF';set_color('F1E8FF')" bgcolor="#F1E8FF"></td>
<td onClick="bb1.style.backgroundColor='E8FFF3';set_color('E8FFF3')" bgcolor="#E8FFF3"></td>
<td onClick="bb1.style.backgroundColor='CDCDDE';set_color('CDCDDE')" bgcolor="#CDCDDE"></td>
</tr>
</table>
</div></td></tr></table>
</div>
<script language=javascript>
function get_cookie(name_to_get) {
var cookie_pair
var cookie_name
var cookie_value
var cookie_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) {
return unescape(cookie_value)
}
}
return null
}
var bg_color = get_cookie("bgColor_cookie")
function set_color(color_val) {
set_cookie("bgColor_cookie", color_val, 365, "/")
}
function set_cookie(cookie_name, cookie_value, cookie_expire, cookie_path, cookie_domain, cookie_secure) {
var cookie_string = cookie_name + "=" + cookie_value
if (cookie_expire) {
var expire_date = new Date()
var ms_from_now = cookie_expire * 24 * 60 * 60 * 1000
expire_date.setTime(expire_date.getTime() + ms_from_now)
var expire_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>
I hope this article will be helpful to everyone's JavaScript programming.