首页
所有分类
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 相关文章推荐
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
JS敏感词过滤代码
Dec 23 Javascript
React简单介绍
May 24 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
分析了一下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
代理(2) 外键(1) 克隆(1) 增删查改(1) S-2000(1) IC-R9500(1) 脏读(2) SQL注入(2) 小喇叭(1) #{}(1)
You might like
thinkphp浏览历史功能实现方法
2014/10/29 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python selenium firefox使用详解
2019/02/26 Python
Django框架模板的使用方法示例
2019/05/25 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
澳大利亚先进的皮肤和激光诊所购物网站：Soho Skincare
2018/10/15 全球购物
Volcom英国官方商店：美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
彪马荷兰官网：PUMA荷兰
2019/05/08 全球购物
关于迟到的检讨书
2014/01/26 职场文书
三方合作协议书范本
2014/04/18 职场文书
跳蚤市场口号
2014/06/13 职场文书
竞聘开场白方式有哪些？
2019/08/28 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
【2·13】一图读懂中国无线电发展
2022/02/18 无线电