JS实现点击颜色块切换指定区域背景颜色的方法
作者:bea
本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法。分享给大家供大家参考。具体实现方法如下: 代码如下: <html> <head> <title>JS实现点击颜色块切换指定区域的背景颜色</title> </head> <body> <div align="center"> <table bgcolor=#F8F8F8 border="0" width="500
本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法。分享给大家供大家参考。具体实现方法如下:
代码如下:
<html>
<head>
<title>JS实现点击颜色块切换指定区域的背景颜色</title>
</head>
<body>
<div align="center">
<table bgcolor=#F8F8F8 border="0" width="500" cellpadding="0" style="border-collapse: collapse" height="180" id="bb1">
<tr>
<td colspan="2">
<div align="center">
<table border="0" width="90%" cellpadding="0" style="border-collapse: collapse" height="90" id="table2">
<tr><td style="line-height: 150%"><span style="font-size: 14px">适时切换网页指定区域背景颜色</span></td>
</tr></table>
</div>
</td>
</tr></table></div>
<div align="center">
<table border="0" width="500" cellpadding="0" style="border-collapse: collapse" height="20" id="table1">
<tr><td width="219"><p align="right"><font color="#808080"><span style="font-size: 9pt">请选择背景:</span></font></td>
<td width="281"><div align="center"><table border="1" width="240" cellspacing="0" cellpadding="0" height="20" id="table1" style="border-collapse: collapse" bordercolor="#FFFFFF">
<tr>
<td width="60" onClick="bb1.style.backgroundColor='FDFDF0';set_color('FDFDF0')" bgcolor="#FDFDF0"></td>
<td onClick="bb1.style.backgroundColor='B1D5F3';set_color('B1D5F3')" bgcolor="#B1D5F3" width="60"></td>
<td onClick="bb1.style.backgroundColor='B4E7D9';set_color('B4E7D9')" bgcolor="#B4E7D9" width="60"></td>
<td onClick="bb1.style.backgroundColor='F1E8FF';set_color('F1E8FF')" bgcolor="#F1E8FF" width="60"></td>
<td onClick="bb1.style.backgroundColor='E8FFF3';set_color('E8FFF3')" bgcolor="#E8FFF3" width="60"></td>
<td onClick="bb1.style.backgroundColor='CDCDDE';set_color('CDCDDE')" bgcolor="#CDCDDE" width="60"></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>
希望本文所述对大家的javascript程序设计有所帮助。
有用 | 无用
代码如下:
<html>
<head>
<title>JS实现点击颜色块切换指定区域的背景颜色</title>
</head>
<body>
<div align="center">
<table bgcolor=#F8F8F8 border="0" width="500" cellpadding="0" style="border-collapse: collapse" height="180" id="bb1">
<tr>
<td colspan="2">
<div align="center">
<table border="0" width="90%" cellpadding="0" style="border-collapse: collapse" height="90" id="table2">
<tr><td style="line-height: 150%"><span style="font-size: 14px">适时切换网页指定区域背景颜色</span></td>
</tr></table>
</div>
</td>
</tr></table></div>
<div align="center">
<table border="0" width="500" cellpadding="0" style="border-collapse: collapse" height="20" id="table1">
<tr><td width="219"><p align="right"><font color="#808080"><span style="font-size: 9pt">请选择背景:</span></font></td>
<td width="281"><div align="center"><table border="1" width="240" cellspacing="0" cellpadding="0" height="20" id="table1" style="border-collapse: collapse" bordercolor="#FFFFFF">
<tr>
<td width="60" onClick="bb1.style.backgroundColor='FDFDF0';set_color('FDFDF0')" bgcolor="#FDFDF0"></td>
<td onClick="bb1.style.backgroundColor='B1D5F3';set_color('B1D5F3')" bgcolor="#B1D5F3" width="60"></td>
<td onClick="bb1.style.backgroundColor='B4E7D9';set_color('B4E7D9')" bgcolor="#B4E7D9" width="60"></td>
<td onClick="bb1.style.backgroundColor='F1E8FF';set_color('F1E8FF')" bgcolor="#F1E8FF" width="60"></td>
<td onClick="bb1.style.backgroundColor='E8FFF3';set_color('E8FFF3')" bgcolor="#E8FFF3" width="60"></td>
<td onClick="bb1.style.backgroundColor='CDCDDE';set_color('CDCDDE')" bgcolor="#CDCDDE" width="60"></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>
希望本文所述对大家的javascript程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jQuery实现移动 和 渐变特效的点击事件
- jQuery 回调函数(callback)的使用和基础
- 使用jQuery获得内容以及内容的属性
- js实现跟随鼠标移动且带关闭功能的图片广告实例
- jquery渐隐渐显的图片幻灯闪烁切换实现方法
- 2则自己编写的jQuery特效分享
- javascript制作网页图片上实现下雨效果
- js实现格式化金额,字符,时间的方法
- 如何减少浏览器的reflow和repaint
- 详谈javascript中DOM的基本属性
- jqueryUI里拖拽排序示例分析
- Jquery的基本对象转换和文档加载用法实例
- jQuery操作JSON的CRUD用法实例
- javascript实现复选框超过限制即弹出警告框的方法
- javascript获得当前的信息的一些常用命令
- javascript实现图像循环明暗变化的方法
- NodeJS中利用Promise来封装异步函数
- JS往数组中添加项性能分析
- 浅谈JavaScript中的String对象常用方法