JS实现点击颜色块切换指定区域背景颜色的方法

前端技术 2023/09/02 JavaScript

本文实例讲述了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>

本文地址：https://www.stayed.cn/item/4020

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案