js 颜色选择器

来源:互联网 发布:mac实用app推荐 编辑:程序博客网 时间:2024/06/09 18:11

<div>
        <table cellspacing="1" cellpadding="3" width="350" align="center" bgcolor="#dddddd"
            border="0">
            <tbody>
                <tr bgcolor="#ffffff">
                    <td align="middle" width="10%">
                        <select onchange="selectchg(this.value)" name="select1">
                            <option value="1" selected>&#32418;</option>
                            <option value="2">&#32511;</option>
                            <option value="3">&#34013;</option>
                            <option value="4">灰</option>
                        </select>
                    </td>
                    <td align="middle" width="90%">
                        <table cellspacing="0" cellpadding="0" width="100%" border="0">
                            <tbody>
                                <tr>
                                    <td align="right">
                                        <input class="memo" size="10" name="text1">
                                        <input class="button" onclick="choosecolor()" type="button" value=">>" name="Button2">
                                    </td>
                                    <td align="right" width="3%">
                                    </td>
                                    <td width="30%">
                                        <table class="cursorcross" height="20" cellspacing="1" cellpadding="0" width="40"
                                            border="0">
                                            <tbody>
                                                <tr>
                                                    <td id="customcolor" onmouseover="showcolor(this)" bgcolor="#ffffff">
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr bgcolor="#ffffff">
                    <td valign="middle" width="10%">
                        <table class="cursorhand" id="tableleft" cellspacing="1" cellpadding="0" border="0">

                            <script language="VBScript">
                            function hexit(which)
                                hexit=hex(which)
                            end function
                            </script>

                            <script language="JavaScript">
                                for (i = 0; i <= 15; ++i) {
                                    document.write('<tr><td align="center">' + hexit(0 + i * 17) + '</td><td id="tdleft' + i + '" bgcolor="rgb(' + (0 + i * 17) + ',0,0)" width="15" height="15" onclick="changeright(this.num)" onmouseover="showcolor(this)"></td></tr>')
                                    document.all['tdleft' + i].num = i
                                }
                            </script>

                            <tbody>
                            </tbody>
                        </table>
                    </td>
                    <td align="middle" width="90%">
                        <table class="cursorcross" id="tableleft" cellspacing="1" cellpadding="0" border="0">

                            <script language="JavaScript">
                                document.write('<tr><td></td>')
                                for (i = 0; i <= 15; ++i)
                                { document.write('<td align="center">' + hexit(0 + i * 17) + '</td>') }
                                document.write('</tr>')

                                for (i = 0; i <= 15; ++i) {
                                    document.write('<tr>')
                                    document.write('<td align="center">' + hexit(0 + i * 17) + '</td>')
                                    for (j = 0; j <= 15; ++j)
                                    { document.write('<td id="tdrightr' + i + 'c' + j + '" bgcolor="rgb(0,' + (0 + i * 17) + ',' + (0 + j * 17) + ')" width="15" height="15" onmouseover="showcolor(this)" onclick="clickright(this)"></td>') }
                                    document.write('</tr>')
                                }

                            </script>

                            <tbody>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr bgcolor="#ffffff">
                    <td colspan="2" height="20">
                        &middot;可&#36873;16*16*16&#31181;&#39068;色。<br>
                        &middot;&#21333;&#20987;左&#36793;的&#39068;色会得到更多的&#39068;色。<br>
                        &middot;&#21333;&#20987;右&#36793;的&#39068;色会固定&#36873;取的&#39068;色。
                        <br>
                        &middot;&#36755;入框可以自定&#20041;&#39068;色。
                    </td>
                </tr>
            </tbody>
        </table>

        <script language="JavaScript">
            function selectchg(which) {
                switch (which) {
                    case '1': leftR(); break;
                    case '2': leftG(); break;
                    case '3': leftB(); break;
                    case '4': leftA(); break;
                }
            }
            function leftR() {
                for (i = 0; i <= 15; ++i)
                { document.all['tdleft' + i].bgColor = 'rgb(' + (0 + i * 17) + ',0,0)' }
                rightR(0)
            }
            function leftG() {
                for (i = 0; i <= 15; ++i)
                { document.all['tdleft' + i].bgColor = 'rgb(0,' + (0 + i * 17) + ',0)' }
                rightG(0)
            }
            function leftB() {
                for (i = 0; i <= 15; ++i)
                { document.all['tdleft' + i].bgColor = 'rgb(0,0,' + (0 + i * 17) + ')' }
                rightB(0)
            }
            function leftA() {
                for (i = 0; i <= 15; ++i)
                { document.all['tdleft' + i].bgColor = 'rgb(' + (0 + i * 17) + ',' + (0 + i * 17) + ',' + (0 + i * 17) + ')' }
                rightA()
            }
            function rightR(which) {
                for (i = 0; i <= 15; ++i) {
                    for (j = 0; j <= 15; ++j)
                    { document.all['tdrightr' + i + 'c' + j].bgColor = 'rgb(' + (0 + which * 17) + ',' + (0 + i * 17) + ',' + (0 + j * 17) + ')' }
                }
            }
            function rightG(which) {
                for (i = 0; i <= 15; ++i) {
                    for (j = 0; j <= 15; ++j)
                    { document.all['tdrightr' + i + 'c' + j].bgColor = 'rgb(' + (0 + i * 17) + ',' + (0 + which * 17) + ',' + (0 + j * 17) + ')' }
                }
            }
            function rightB(which) {
                for (i = 0; i <= 15; ++i) {
                    for (j = 0; j <= 15; ++j)
                    { document.all['tdrightr' + i + 'c' + j].bgColor = 'rgb(' + (0 + i * 17) + ',' + (0 + j * 17) + ',' + (0 + which * 17) + ')' }
                }
            }
            function rightA() {
                for (i = 0; i <= 15; ++i) {
                    for (j = 0; j <= 15; ++j)
                    { document.all['tdrightr' + i + 'c' + j].bgColor = 'rgb(' + (0 + i * 16 + j) + ',' + (0 + i * 16 + j) + ',' + (0 + i * 16 + j) + ')' }
                }
            }
            var rightclicked = false
            function clickright(which) {
                if (rightclicked) { rightclicked = false; showcolor(which) } else { rightclicked = true }
            }
            function changeright(which) {
                switch (select1.value) {
                    case '1': rightR(which); break;
                    case '2': rightG(which); break;
                    case '3': rightB(which); break;
                }
            }
            function showcolor(which) {
                if (rightclicked) return;
                text1.value = which.bgColor
                choosecolor()
            }
            function choosecolor() {
                customcolor.bgColor = text1.value
            }
        </script>

    </div>

原创粉丝点击