发布您的源码作品！会员登录/控制面版

用按钮来调整各颜色的比例，从而调整背景颜色

作者：佚名来源：不详发布时间：2006/10/29 发布人：admin

要完成此效果把如下代码加入到<body>区域中

<Script language="JavaScript">

<-- Hiding

var red=0;

var green=0;

var blue=0;

var value=0;

var convert = new Array()

var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");

for (x=0; x<16; x++){

for (y=0; y<16; y++){

convert[value]= hexbase[x] + hexbase[y];

value++;

}

}

function clear(){

document.color.bl.value= blue;

document.color.rd.value= red;

document.color.gr.value= green;

}

function display(){

redx = convert[red]

greenx = convert[green]

bluex = convert[blue]

var rgb = "#"+redx+greenx+bluex;

document.color.rgbdspl.value= rgb;

document.bgColor =rgb;

}

function upred(x){

if ((red+x)<=255)

red+=x

document.color.rd.value= red;

display()

}

function downred(x){

if ((red-x)>=0)

red-=x

document.color.rd.value= red;

display()

}

function upgreen(x){

if ((green+x)<=255)

green+=x

document.color.gr.value= green;

display()

}

function downgreen(x){

if ((green-x)>=0)

green-=x

document.color.gr.value= green;

display()

}

function upblue(x){

if ((blue+x)<=255)

blue+=x

document.color.bl.value= blue;

display()

}

function downblue(x){

if ((blue-x)>=0)

blue-=x

document.color.bl.value= blue;

display()

}

// done hiding -->

</Script>

<form name="color">

<table align="center">
    <tr align="Center">

<td width="52"> 
        <input name="red" type="button" value=" +50 " onClick="upred(50)">

</td>

<td width="58"> 
        <input name="red2" type="button" value=" + 10 " onClick="upred(10)">

</td>

<td width="46"> 
        <input name="red2" type="button" value=" + 1" onClick="upred(1)">

</td>

<td width="52"><font color="#FF0000" size=+3><b><font color="#FA0000" face="楷体_GB2312">红</font></b></font></td>
      <td width="46"> 
        <input name="red-" type="button" value=" - 1" onClick="downred(1)">

</td>

<td width="58"> 
        <input name="red-" type="button" value=" - 10 " onClick="downred(10)">

</td>

<td width="52"> 
        <input name="red-" type="button" value=" -50 " onClick="downred(50)">

</td>

<td width="29"> 
        <input type="text" name="rd" size=3>

</td>

</tr>

<tr align="Center">

<td width="52"> 
        <input name="green" type="button" value=" +50 " onClick="upgreen(50)">

</td>

<td width="58"> 
        <input name="green" type="button" value=" + 10 " onClick="upgreen(10)">

</td>

<td width="46"> 
        <input name="green" type="button" value=" + 1" onClick="upgreen(1)">

</td>

<td width="52"><font color="#00FF00" size=+3><b><font color="#00FA00" face="楷体_GB2312">绿</font></b></font></td>
      <td width="46"> 
        <input name="green-" type="button" value=" - 1" onClick="downgreen(1)">

</td>

<td width="58"> 
        <input name="green-" type="button" value=" - 10 " onClick="downgreen(10)">

</td>

<td width="52"> 
        <input name="green-" type="button" value=" -50 " onClick="downgreen(50)">

</td>

<td width="29"> 
        <input type="text" name="gr" size=3>

</td>

</tr>

<tr align="Center">

<td width="52"> 
        <input name="blue" type="button" value=" +50 " onClick="upblue(50)">

</td>

<td width="58"> 
        <input name="blue" type="button" value=" + 10 " onClick="upblue(10)">

</td>

<td width="46"> 
        <input name="blue" type="button" value=" + 1" onClick="upblue(1)">

</td>

<td width="52"><font color="#0000FF" size=+3><b><font color="#0000FA" face="楷体_GB2312">蓝</font></b></font></td>
      <td width="46"> 
        <input name="blue-" type="button" value=" - 1" onClick="downblue(1)">

</td>

<td width="58"> 
        <input name="blue-" type="button" value=" - 10 " onClick="downblue(10)">

</td>

<td width="52"> 
        <input name="blue-" type="button" value=" -50 " onClick="downblue(50)">

</td>

<td width="29"> 
        <input type="text" name="bl" size=3>

</td>

</tr>

<tr align="Center">

<td width="52"> </td>

<td width="58"> </td>

<td width="46"> </td>

<td width="52"> 
        <input type="text" name="rgbdspl" size=7>

</td>

<td width="46"> </td>

<td width="58"> </td>

<td width="52"> </td>

<td width="29"> </td>

</tr>

</table>

<div align="center"></div>
  <div align="center"></div>
</form>

特别说明：如网页特效代码中有引用图片文件等，请自己下载到本地调试！

[] [返回] [打印] [收藏] [评论]

上一篇代码：鼠标移到链接文字上，随之改变背景颜色

下一篇代码：鼠标指向颜色块，在状态栏就能看到该颜色的代码

精品推荐

阅读排行

· 自己动手输入网页背景颜色代码
· 随机数字生成器
· 礼花背景(一个非常经典的网页背景）
· 鼠标经过文字变色
· 倒计时代码生成器
· [图文] 代码实现生成弹出窗口的特效
· [图文] 星星满天闪烁的背景
· 颜色英文代码全集
· 速度练习　测试你打字的速度
· 爱情游戏测试

相关代码

· C#怎么用按纽控制日历控件，不让它自动更新
· 怎么设置默认的窗口大小和文字背景颜色
· 选择单选框变改背景颜色。
· 用按钮实现类似百度谷歌分页（交流）
· 求DropDownList1的下表列框的有多种颜色,按按钮触..
· 时间和日期分别用按钮来实现相互转换
· 用按钮来选择链接目的地
· 背景颜色安全测试(鼠标动态改变背景颜色）强烈推荐..
· 自已选择背景颜色(输入代码变代背景色）
· 背景颜色自己选