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

Javascript 相关文章推荐
alert出数组中的随即值代码
Sep 25 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
JS Attribute属性操作详解
May 19 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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
php flv视频时间获取函数
2010/06/29 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
学习jQuey中的return false
2015/12/18 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
深入浅析python定时杀进程
2016/06/06 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
python 如何引入协程和原理分析
2020/11/30 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
《都江堰》教学反思
2014/02/07 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
2014年班主任工作总结
2014/11/08 职场文书
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL