您的位置：首页 > Web前端 > JavaScript

js色彩选择如何实现

2012-05-28 11:34 309 查看

第一种:

<html>

    <head>

    <title> 在颜色选取 </title>

    <meta       http-equiv="Content-Type"       content="text/html;       charset=gb2312">

    <SCRIPT>

    var       sInitColor       =       null;

    function       callColorDlg(){



    if       (sInitColor       ==       null)

    //display       color       dialog       box

    var       sColor       =       dlgHelper.ChooseColorDlg();

    else

    var       sColor       =       dlgHelper.ChooseColorDlg(sInitColor);

    //change       decimal       to       hex

    sColor       =       sColor.toString(16);

    if       (sColor.length       <       6)       {

            var       sTempString       =       "000000".substring(0,6-sColor.length);

            sColor       =       sTempString.concat(sColor);

    }

    alert("你选的颜色是：       #"+sColor)

    document.body.style.background = "#" +sColor;

    }

    </SCRIPT>

    </head>



    <body>

    <BUTTON       ID="ofntColor"       TITLE="选择颜色"       onclick="callColorDlg()"> 选择颜色 </BUTTON>

    <OBJECT       id=dlgHelper       CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px"       height="0px"> </OBJECT>



    </body>

    </html>

第二种:

<HTML><HEAD><TITLE>颜色</TITLE>

<META http-equiv=Content-Type content="text/html; charset=gb2312">

<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 DoColor(c, l)

{ var r, g, b;

r = '0x' + c.substring(1, 3);

g = '0x' + c.substring(3, 5);

b = '0x' + c.substring(5, 7);

if(l > 120)

{

    l = l - 120;

    r = (r * (120 - l) + 255 * l) / 120;

    g = (g * (120 - l) + 255 * l) / 120;

    b = (b * (120 - l) + 255 * l) / 120;

}else

{

    r = (r * l) / 120;

    g = (g * l) / 120;

    b = (b * l) / 120;

}

return '#' + ToHex(r) + ToHex(g) + ToHex(b);

}

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 language=JavaScript event=onclick for=ColorTable>

SelRGB = event.srcElement.bgColor;

EndColor();

</SCRIPT>

<SCRIPT language=JavaScript event=onmouseover for=ColorTable>

RGB.innerText = event.srcElement.bgColor;

EndColor();

</SCRIPT>

<SCRIPT language=JavaScript event=onmouseout for=ColorTable>

RGB.innerText = SelRGB;

EndColor();

</SCRIPT>

<SCRIPT language=JavaScript event=onclick for=GrayTable>

SelGRAY = event.srcElement.title;

EndColor();

</SCRIPT>

<SCRIPT language=JavaScript event=onmouseover for=GrayTable>

GRAY.innerText = event.srcElement.title;

EndColor();

</SCRIPT>

<SCRIPT language=JavaScript event=onmouseout for=GrayTable>

GRAY.innerText = SelGRAY;

EndColor();

</SCRIPT>

<SCRIPT language=JavaScript event=onclick for=Ok>

window.returnValue = SelColor.value;

window.close();

</SCRIPT>

<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>

<BODY bgColor=menu>

<DIV align=center>

<CENTER>

<TABLE cellSpacing=10 cellPadding=0 border=0>

<TBODY>

<TR>

    <TD>

      <TABLE id=ColorTable style="CURSOR: hand" cellSpacing=0 cellPadding=0

      border=0>

        <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 id=GrayTable style="CURSOR: hand" cellSpacing=0 cellPadding=0

      border=0>

        <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 cellSpacing=10 cellPadding=0 border=0>

<TBODY>

<TR>

    <TD align=middle rowSpan=2>选中色彩

      <TABLE id=ShowColor height=30 cellSpacing=0 cellPadding=0 width=40

      border=1>

        <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

onclick=window.close();>取消</BUTTON></TD></TR></TBODY></TABLE></CENTER></DIV></BODY></HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript border function button table n2

相关文章推荐

新的分享

章节导航