首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现网页背景颜色与select框中颜色同时变化的方法

Posted in Javascript onFebruary 27, 2015

本文实例讲述了JS实现网页背景颜色与select框中颜色同时变化的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS实现网页背景颜色与select框中的颜色同时变化</title>

</head>

<body>

<script language="javascript">

 colors = new Array('#FFFFFF','#FFCCFF','#FF99FF','#FF66FF','#FF33FF','#FF00FF','#FFFFCC','#FFCCCC','#FF99CC','#FF66CC','#FF33CC','#FF00CC','#FFFF99','#FFCC99','#FF9999','#FF6699','#FF3399','#FF0099','#FFFF66','#FFCC66','#FF9966','#FF6666','#FF3366','#FF0066','#FFFF33','#FFCC33','#FF9933','#FF6633','#FF3333','#FF0033','#FFFF00','#FFCC00','#FF9900','#FF6600','#FF3300','#FF0000','#CCFFFF','#CCCCFF','#CC99FF','#CC66FF','#CC33FF','#CC00FF','#CCFFCC','#CCCCCC','#CC99CC','#CC66CC','#CC33CC','#CC00CC','#CCFF99','#CCCC99','#CC9999','#CC6699','#CC3399','#CC0099','#CCFF66','#CCCC66','#CC9966','#CC6666','#CC3366','#CC0066','#CCFF33','#CCCC33','#CC9933','#CC6633','#CC3333','#CC0033','#CCFF00','#CCCC00','#CC9900','#CC6600','#CC3300','#CC0000','#99FFFF','#99CCFF','#9999FF','#9966FF','#9933FF','#9900FF','#99FFCC','#99CCCC','#9999CC','#9966CC','#9933CC','#9900CC','#99FF99','#99CC99','#999999','#996699','#993399','#990099','#99FF66','#99CC66','#999966','#996666','#993366','#990066','#99FF33','#99CC33','#999933','#996633','#993333','#990033','#99FF00','#99CC00','#999900','#996600','#993300','#990000','#66FFFF','#66CCFF','#6699FF','#6666FF','#6633FF','#6600FF','#66FFCC','#66CCCC','#6699CC','#6666CC','#6633CC','#6600CC','#66FF99','#66CC99','#669999','#666699','#663399','#660099','#66FF66','#66CC66','#669966','#666666','#663366','#660066','#66FF33','#66CC33','#669933','#666633','#663333','#660033','#66FF00','#66CC00','#669900','#666600','#663300','#660000','#33FFFF','#33CCFF','#3399FF','#3366FF','#3333FF','#3300FF','#33FFCC','#33CCCC','#3399CC','#3366CC','#3333CC','#3300CC','#33FF99','#33CC99','#339999','#336699','#333399','#330099','#33FF66','#33CC66','#339966','#336666','#333366','#330066','#33FF33','#33CC33','#339933','#336633','#333333','#330033','#33FF00','#33CC00','#339900','#336600','#333300','#330000','#00FFFF','#00CCFF','#0099FF','#0066FF','#0033FF','#0000FF','#00FFCC','#00CCCC','#0099CC','#0066CC','#0033CC','#0000CC','#00FF99','#00CC99','#009999','#006699','#003399','#000099','#00FF66','#00CC66','#009966','#006666','#003366','#000066','#00FF33','#00CC33','#009933','#006633','#003333','#000033','#00FF00','#00CC00','#009900','#006600','#003300','#000000');

 function show(file){

  var url = file.options[file.selectedIndex].value;

  if(document.all || document.layers)

   location.href = url;

  else if(document.getElementById){

   if(url != undefined)

    location.href = url;

  }

 }

 var streng;

 var color1 = colors[Math.round(Math.random() * (colors.length-1))];

 var color2 = colors[Math.round(Math.random() * (colors.length-1))];

 var color3 = colors[Math.round(Math.random() * (colors.length-1))];

 streng = '<style type="text/css">select{width:300; height:118; overflow:hidden; font-family:times new roman; font-size: 14px; color:';

 streng += color1;

 streng += '; background:';

 streng += color2;

 streng += ';}body{background: ';

 streng += color3;

 streng += ';}td{font-family: times new roman; font-size: 14px; color: #000000;}</style>';

 document.writeln(streng);

 </script>

 <table border="0" cellspacing="0" cellpadding="0" width="500">

  <form name="form" target="_blank">

 <tr>

  <td>

  <select name="showoff" id="showoff" size="3" width="200" onChange="show(document.form.showoff)">

   <option value="http://www.163.com">163网易</option>

   <option value="http://www.baidu.com">百度搜索</option>

  </select>

  </td>

 </tr>

 </form>

 </table>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

JS实现网页背景颜色与select框中颜色同时变化的方法

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
js仿360开机效果
Dec 26 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 #Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 #Javascript
JQuery中绑定事件（bind()）和移除事件（unbind()）
Feb 27 #Javascript
Jquery中Event对象属性小结
Feb 27 #Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 #Javascript
JS实现往下不断流动网页背景的方法
Feb 27 #Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 #Javascript
iOS16(1) FuzzyWuzzy(1) 模糊匹配(1) 模型保存加载(1) opencv(7) Pyecharts(7) moviepy(1) iOS(1) compose(3) Athens(1)
You might like
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python环境变量设置方法
2016/08/28 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
python读取各种文件数据方法解析
2018/12/29 Python
Python 下载及安装详细步骤
2019/11/04 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
Python如何读取、写入CSV数据
2020/07/28 Python
英国领先的电动可调床制造商：Laybrook
2019/12/26 全球购物
幼师自荐信
2013/10/26 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
《总之就是很可爱》新作短篇动画《总之就是很可爱～制服～》将于2022年夏天播出
2022/04/07 日漫