javaScrip实现调色板本功能

最新推荐文章于 2021-06-04 05:30:56 发布

javagarden

最新推荐文章于 2021-06-04 05:30:56 发布

阅读量897

点赞数

分类专栏： Web 开发文章标签： javascript border function table button html

本文链接：https://blog.csdn.net/javagarden/article/details/1269273

版权

Web 开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1 项目背景介绍

最近开发一个项目，因为属于二次开发，很多开发受限制已经开发的框架，因为要做一个颜色显示功能，在后台管理系统中，要把将要显示给用户的颜色的RGB值写到数据库中，为前台显示准备，所以特设计一个调色版本进行选择，其中部分源代码来此网络。改调色版本仅仅是在IE6.0 进行测试过。

2 代码

演示这个代码包括两个部分，selectColor.html 主要是提供一个选择颜色的页面，而color.html 主要是颜色调试，点击可以回填给点击者。

selectColor.html 源代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>选择调色版-by pray
</TITLE>
<script language="javaScript">
function getColor(form)
{
var returnColor = window.showModalDialog("color.html ")
//alert("a is "+returnColor);
if(returnColor!=undefined&&returnColor!='#NaNNaNNaN'){
   form.color.value=returnColor;
   }
else{
   form.color.value="";
}

}

</script>

<BODY>
<form name="testForm">
<input type=hidden name="testColor" value="123">
<table>
<center>
<tr>
<td align=center > 要选择颜色</td>
</tr>
<tr>
<td>背景颜色<input type="text" name="color" id="color" size=20 οnclick="getColor(this.form)" readonly ></td>

</tr>
</center>
</table>
</BODY>
</form>
</HTML>

--------------------------------------------------------------------------------------------------------------------------------------

color.html 源代码

<HTML>
<HEAD>
<TITLE>颜色</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>TD { FONT-SIZE: 10.8pt } BODY { FONT-SIZE: 10.8pt } BUTTON { WIDTH: 5em } </STYLE>
<SCRIPT language=JavaScript>
   var SelRGB = '';
   var DrRGB = '';
   var SelGRAY = '120';
   var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');

   function ToHex(n) {
    var h, l; n = Math.round(n);
    l = n % 16; h = Math.floor((n / 16)) % 16;
    return (hexch[h] + hexch[l]);
    }

    function EndColor() {
    var i;
    if(DrRGB != SelRGB) {
    DrRGB = SelRGB;
    for(i = 0; i <= 30; i ++)
    GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8);
    }
    SelColor.value = DoColor(RGB.innerText, GRAY.innerText);
    ShowColor.bgColor = SelColor.value;
    }
</SCRIPT>
<SCRIPT event=onclick for=ColorTable language=JavaScript> SelRGB = event.srcElement.bgColor; EndColor(); </SCRIPT>
<SCRIPT event=onmouseover for=ColorTable language=JavaScript> RGB.innerText = event.srcElement.bgColor; EndColor();
    </SCRIPT>
<SCRIPT event=onmouseout for=ColorTable language=JavaScript> RGB.innerText = SelRGB; EndColor(); </SCRIPT>
<SCRIPT event=onclick for=GrayTable language=JavaScript> SelGRAY = event.srcElement.title; EndColor(); </SCRIPT>
<SCRIPT event=onmouseover for=GrayTable language=JavaScript> GRAY.innerText = event.srcElement.title; EndColor(); </SCRIPT>
<SCRIPT event=onmouseout for=GrayTable language=JavaScript> GRAY.innerText = SelGRAY; EndColor(); </SCRIPT>
<SCRIPT event=onclick for=Ok language=JavaScript>
if(SelColor.value !='#NaNNaNNaN'&&SelColor.value!=""){
   window.returnValue = SelColor.value;
   //alert("选择的颜色为:"+SelColor.value);
   window.close();

}
else{
alert("你没有选择任何颜色!");
}
</SCRIPT>

<BODY bgColor=#BBBBBB>
<DIV align=center>
<CENTER>
<TABLE border=0 cellPadding=0 cellSpacing=10>
  <TBODY>
   <TR>
    <TD>
     <TABLE border=0 cellPadding=0 cellSpacing=0 id=ColorTable style="CURSOR: hand">
      <SCRIPT language=JavaScript>
       function wc(r, g, b, n) {
        r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
        g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
        b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;
        document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>');
       }
       var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);
       for(i = 0; i < 16; i ++) {
       document.write('<TR>');
       for(j = 0; j < 30; j ++) {
       n1 = j % 5; n2 = Math.floor(j / 5) * 3;
       n3 = n2 + 3; wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)), (cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)), (cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i);
       }
       document.writeln('</TR>');
       }
      </SCRIPT>
      <TBODY></TBODY>
     </TABLE>
    </TD>
    <TD>
     <TABLE border=0 cellPadding=0 cellSpacing=0 id=GrayTable style="CURSOR: hand">
      <SCRIPT language=JavaScript>
       for(i = 255; i >= 0; i -= 8.5)
        document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=4 width=20></TD></TR>');
      </SCRIPT>
      <TBODY></TBODY>
     </TABLE>
    </TD>
   </TR>
  </TBODY>
</TABLE>
</CENTER>
</DIV>
<DIV align=center>
<CENTER>
  <TABLE border=0 cellPadding=0 cellSpacing=10>
   <TBODY>
    <TR>
     <TD align=middle rowSpan=2>选中色彩
      <TABLE border=1 cellPadding=0 cellSpacing=0 height=30 id=ShowColor width=40>
       <TBODY>
        <TR>
         <TD></TD>
        </TR>
       </TBODY>
      </TABLE>
     </TD>
     <TD rowSpan=2>基色:<SPAN id=RGB></SPAN><BR>亮度: <SPAN id=GRAY>120</SPAN><BR>代码:  <INPUT id=SelColor size=7>
     </TD>
     <TD>
      <BUTTON id=Ok type=submit>确定</BUTTON>
     </TD>
    </TR>
    <TR>
     <TD>
      <BUTTON οnclick=window.close();>取消</BUTTON>
     </TD>
    </TR>
   </TBODY>
  </TABLE>
</CENTER>
</DIV>
</BODY>
</HTML>

3 相关解释

javagarden

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScrip实现调色板本功能

1 项目背景介绍最近开发一个项目，因为属于二次开发，很多开发受限制已经开发的框架，因为要做一个颜色显示功能，在后台管理系统中，要把将要显示给用户的颜色的RGB值写到数据库中，为前台显示准备，所以特设计一个调色版本进行选择，其中部分源代码来此网络。改调色版本仅仅是在IE6.0 进行测试过。2 代码演示这个代码包括两个部分，selectColor.html 主要是提供
复制链接

扫一扫