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 面向对象全新理练之继承与多态
Dec 03 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
微信小程序入门之绘制时钟
Oct 22 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
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
初识Laravel
2014/10/30 PHP
PHP实现合并discuz用户
2015/08/05 PHP
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
微信小程序实现简单评论功能
2018/11/28 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
Python 的 with 语句详解
2014/06/13 Python
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
python TCP包注入方式
2020/05/05 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
Linux操作面试题
2012/05/16 面试题
2014全国两会心得体会
2014/03/17 职场文书
网络编辑求职信
2014/04/30 职场文书
教师自我剖析材料
2014/09/29 职场文书
2014年纪检工作总结
2014/11/12 职场文书
项目经理岗位职责
2015/01/31 职场文书
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技