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 对象介绍
Jan 20 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
jquery处理json对象
Nov 03 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
详解JS数组方法
Nov 20 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 OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
vue实现搜索功能
2019/05/28 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
教师自荐信
2013/12/10 职场文书
2015年元旦标语大全
2014/12/09 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang