编程 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程序设计有所帮助。

- Author -

代码家园

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

Javascript 相关文章推荐

prototype 中文参数乱码解决方案

Nov 09 Javascript

Web Inspector：关于在 Sublime Text 中调试Js的介绍

Apr 18 Javascript

Javascript 垃圾收集机制介绍理解

May 14 Javascript

模拟电子签章盖章效果的jQuery插件源码

Jun 24 Javascript

jQuery中:not选择器用法实例

Dec 30 Javascript

JS实现简单的键盘打字的效果

Apr 24 Javascript

javascript日期计算实例分析

Jun 29 Javascript

JS正则获取HTML元素的方法

Mar 31 Javascript

Angular2安装angular-cli

May 21 Javascript

vue2.0 根据状态值进行样式的改变展示方法

Mar 13 Javascript

微信小程序wx.request拦截器使用详解

Jul 09 Javascript

5个实用的JavaScript新特性

Jun 16 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

You might like

DIY实用性框形天线

2021/03/02 无线电

PHP微信网页授权的配置文件操作分析

2019/05/29 PHP

Yii框架应用组件用法实例分析

2020/05/15 PHP

JQuery EasyUI 对话框的使用方法

2010/10/24 Javascript

javascript淡入淡出效果的实现思路

2012/03/31 Javascript

js实现拉伸拖动iframe的具体代码

2013/08/03 Javascript

JS实现日期加减的方法

2013/11/29 Javascript

jQuery中hover方法和toggle方法使用指南

2015/02/27 Javascript

关于延迟加载JavaScript

2015/05/05 Javascript

javascript实时显示当天日期的方法

2015/05/20 Javascript

基于jquery实现页面滚动到底自动加载数据的功能

2015/12/19 Javascript

使用node+vue.js实现SPA应用

2016/01/28 Javascript

js实现HashTable(哈希表)的实例分析

2016/11/21 Javascript

纯js仿淘宝京东商品放大镜功能

2017/03/02 Javascript

jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】

2018/05/26 jQuery

Vue中的混入的使用(vue mixins)

2018/06/01 Javascript

vue elementUI tree树形控件获取父节点ID的实例

2018/09/12 Javascript

微信小程序分享海报生成的实现方法

2018/12/10 Javascript

nodejs中方法和模块用法示例

2018/12/24 NodeJs

JS实现的Object数组去重功能示例【数组成员为Object对象】

2019/02/01 Javascript

微信小程序仿今日头条导航栏滚动解析

2019/08/20 Javascript

用python实现的去除win下文本文件头部BOM的代码

2013/02/10 Python

Python使用scrapy采集时伪装成HTTP/1.1的方法

2015/04/08 Python

Python 中 Meta Classes详解

2016/02/13 Python

在Linux命令行终端中使用python的简单方法(推荐)

2017/01/23 Python

Python模拟用户登录验证

2017/09/11 Python

Django Admin中增加导出CSV功能过程解析

2019/09/04 Python

tensorflow实现对张量数据的切片操作方式

2020/01/19 Python

TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现

2020/02/17 Python

通用的Django注册功能模块实现方法

2021/02/05 Python

CSS3的calc()做响应模式布局的实现方法

2017/09/06 HTML / CSS

HTML5输入框下拉菜单功能的示例代码

2020/09/08 HTML / CSS

给老婆的婚前保证书

2014/02/01 职场文书

家庭贫困证明书（3篇）

2014/09/15 职场文书

2014年调度员工作总结

2014/11/19 职场文书

租赁协议书

2015/01/27 职场文书