| 标题 | JS实现点击颜色块切换指定区域背景颜色的方法 |
| 内容 | 这篇文章主要介绍了JS实现点击颜色块切换指定区域背景颜色的方法,涉及javascript操作cookie及背景色的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法。分享给大家供大家参考。具体实现方法如下： 代码如下: <html> <head> <title>JS实现点击颜色块切换指定区域的背景颜色</title> </head> <body> <div> <table bgcolor=#F8F8F8 width="500" cellpadding="0" height="180" id="bb1"> <tr> <td colspan="2"> <div> <table width="90%" cellpadding="0" height="90" id="table2"> <tr><td><span>适时切换网页指定区域背景颜色</span></td> </tr></table> </div> </td> </tr></table></div> <div> <table width="500" cellpadding="0" height="20" id="table1"> <tr><td width="219"><p><font color="#808080"><span>请选择背景：</span></font></td> <td width="281"><div><table width="240" cellspacing="0" cellpadding="0" height="20" id="table1" 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程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。