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 相关文章推荐
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
vue实现拖拽效果
Dec 23 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
Python获取当前路径实现代码
2017/05/08 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
python实现简单遗传算法
2020/09/18 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
环境科学毕业生自荐信
2013/11/21 职场文书
医学专业毕业生个人的求职信
2013/12/04 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
500字小学生检讨书
2015/02/19 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
python中 .npy文件的读写操作实例
2022/04/14 Python