Js适时切换网页背景颜色

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<title>适时切换背景颜色</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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Js适时切换网页背景颜色

分类

描述

为了提高用户体验和风页风格的需要，一些网站在网页上加入了让用户自己选择网页或某个区域的背景颜色，这就要用到JavaScript技术了，另外还用到有Cookies技术，将用户的选择保存在电脑里，避免用用户再次选择的麻烦，在DISCUZ论坛里，大...