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 相关文章推荐
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
全面理解闭包机制
Jul 11 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
小程序云开发之用户注册登录
May 18 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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中文乱码
2009/11/26 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
降低PHP Redis内存占用
2017/03/23 PHP
javascript 函数参数限制说明
2010/11/19 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
python3 读写文件换行符的方法
2018/04/09 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
函授本科毕业生自我鉴定
2013/10/16 职场文书
环保项目建议书
2014/08/26 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
趣味运动会标语口号
2015/12/26 职场文书
你会写请假条吗?
2019/06/26 职场文书