首页
所有分类
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 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
javascript实现漂亮的拖动层，窗口拖拽特效
Apr 24 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
移动端js触摸事件详解
Sep 18 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
js实现移动端图片滑块验证功能
Sep 29 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
NoSQL(1) json_extract(1) ant design(2) 弹窗(1) JOIN(1) cypress(1) netty(1) 缓冲区(1) 变量提升(1) form表单(1)
You might like
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
php实现微信原生支付（扫码支付）功能
2018/05/30 PHP
laravel + vue实现的数据统计绘图（今天、7天、30天数据）
2018/07/31 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
搞笑的程序猿：看看你是哪种Python程序员
2015/06/12 Python
Python编程中的文件操作攻略
2015/10/16 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
详解html5 canvas 微信海报分享（个人爬坑）
2018/01/12 HTML / CSS
医学院校毕业生自荐信范文
2014/01/01 职场文书
篮球比赛口号
2014/06/10 职场文书
大专生找工作自荐书
2014/06/10 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
MySQL 存储过程的优缺点分析
2021/05/20 MySQL