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


Posted in Javascript onFebruary 25, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
layui原生表单验证的实例
Sep 09 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 #Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 #Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 #Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 #Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 #Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 #Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 #Javascript
You might like
PHP date函数常用时间处理方法
2015/05/11 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
JavaScript之编码规范 推荐
2012/05/23 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
详解详解Python中writelines()方法的使用
2015/05/25 Python
利用Python开发实现简单的记事本
2016/11/15 Python
python3.x上post发送json数据
2018/03/04 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python实现证件照换底功能
2019/08/20 Python
Django操作session 的方法
2020/03/09 Python
django中的数据库迁移的实现
2020/03/16 Python
Python气泡提示与标签的实现
2020/04/01 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
python 对xml解析的示例
2021/02/27 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
TCP/IP的分层模型
2013/10/27 面试题
关于旷工的检讨书
2014/02/02 职场文书
《钱学森》听课反思
2014/03/01 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
恰同学少年观后感
2015/06/08 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript