JS實現(xiàn)點擊顏色塊切換指定區(qū)域背景顏色的方法
本文實例講述了JS實現(xiàn)點擊顏色塊切換指定區(qū)域背景顏色的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
<head>
<title>JS實現(xiàn)點擊顏色塊切換指定區(qū)域的背景顏色</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">適時切換網(wǎng)頁指定區(qū)域背景顏色</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程序設(shè)計有所幫助。
相關(guān)文章
JS中產(chǎn)生20位隨機數(shù)以0-9為例也可以是a-z A-Z
本節(jié)主要介紹了JS如何產(chǎn)生隨機數(shù),本例產(chǎn)生20位隨機數(shù)以0-9為例也可以是a-z A-Z,需要的朋友可以參考下2014-08-08javascript設(shè)計模式 – 建造者模式原理與應(yīng)用實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 建造者模式,結(jié)合實例形式分析了javascript建造者模式相關(guān)概念、原理、應(yīng)用場景及操作注意事項,需要的朋友可以參考下2020-04-04JavaScript?ECMAScript?6(ES2015~ES2022)所有新特性總結(jié)
這篇文章主要介紹了JavaScript?ECMAScript?6(ES2015~ES2022)所有新特性總結(jié),文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-07-07JS中國標(biāo)準(zhǔn)時間轉(zhuǎn)化為年月日時分秒'yyyy-MM-dd hh:mm:ss'的示例詳解
這篇文章主要介紹了JS中國標(biāo)準(zhǔn)時間轉(zhuǎn)化為年月日時分秒‘yyyy-MM-dd hh:mm:ss‘的相關(guān)知識,通過示例代碼介紹了,Js各種時間轉(zhuǎn)換問題(YYYY-MM-DD 時間戳 中國標(biāo)準(zhǔn)時間),需要的朋友可以參考下2024-02-02Webpack學(xué)習(xí)之動態(tài)import原理及源碼分析
這篇文章主要為大家介紹了Webpack學(xué)習(xí)之動態(tài)import原理及源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04