首页
所有分类
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 学习书 推荐
Jun 13 Javascript
JavaScript 函数调用规则
Sep 14 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能（函数防抖）
Sep 19 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 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
GZIP(2) DBLink(1) DNS服务器(2) .NET Framework(2) FTP服务器(1) 粒子对撞机(1) 对撞机(1) 磁盘分区(1) IIS7(1) 界面设计(1)
You might like
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
JavaScript库 开发规则
2009/01/31 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
JS hashMap实例详解
2016/05/26 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python实现多进程的四种方式
2019/02/22 Python
Django REST framework 视图和路由详解
2019/07/19 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
迪拜航空官方网站：flydubai
2017/04/20 全球购物
Smashbox英国官网：美国知名彩妆品牌
2017/11/13 全球购物
德国自然时尚和有机产品购物网站：Waschbär
2019/05/29 全球购物
主持人演讲稿
2014/05/13 职场文书
工程部岗位职责
2015/02/10 职场文书
对公司的意见和建议
2015/06/04 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
用python自动生成日历
2021/04/24 Python
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers