js颜色选择器修改版（兼容firefox,chrome)

来源：互联网发布：联系淘宝客服编辑：程序博客网时间：2024/05/16 05:42

点击input输入框弹出颜色选择器,然后选择自己喜欢的颜色.本JS类兼容firefox和chrome.

前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JSLibraryDemo.aspx.cs" Inherits="JSLibraryDemo" %><!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 runat="server">    <title>JS类库测试</title>    <script type="text/javascript" src="JSLibrary/ColorSelector.js"></script>    <script type="text/javascript">             </script></head><body>    <form id="form1" runat="server">    <div>            <input type="text" id="color" onclick="coloropen(event)" />      <div id="colorpane" style="position:absolute;z-index:999;display:none;"></div>      <span id="inputcolor"></span>    </div>    </form></body></html>

JS颜色选择器类:

var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF')var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF')var current = nullfunction initcolor(evt) {    var colorTable = ''    for (i = 0; i < 2; i++)    {        for (j = 0; j < 6; j++)        {            colorTable = colorTable + '<tr height=15>'            colorTable = colorTable + '<td width=15 style="background-color:#000000">'            if (i == 0) {                colorTable = colorTable + '<td width=15 style="cursor:pointer;background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '" onclick="doclick(\'#' + SpColorHex[j] + '\')">'            }            else {                colorTable = colorTable + '<td width=15 style="cursor:pointer;background-color:#' + SpColorHex[j] + '" onclick="doclick(\'#' + SpColorHex[j] + '\')">'            }            colorTable = colorTable + '<td width=15 style="background-color:#000000">'            for (k = 0; k < 3; k++)            {                for (l = 0; l < 6; l++)                {                    colorTable = colorTable + '<td width=15 style="cursor:pointer;background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '" onclick="doclick(\'#' + SpColorHex[j] + '\')">'                }            }        }    }    colorTable = '<table border="1" cellspacing="0" cellpadding="0" style="text-align:center;cursor:pointer;border-collapse:collapse" bordercolor="000000" >'    + '<tr><td colspan="21"><span style="float:right;margin-right:5px;cursor:pointer;" onclick="colorclose()">×关闭</span><span style="float:right;margin-right:5px;cursor:pointer;" onclick="defaultColor()">默认颜色</span></td></tr>'    + colorTable + '</table>';    document.getElementById("colorpane").innerHTML = colorTable;    var current_x = document.getElementById("inputcolor").offsetLeft;    var current_y = document.getElementById("inputcolor").offsetTop;    //alert(current_x + "-" + current_y)     document.getElementById("colorpane").style.left = current_x + "px";    document.getElementById("colorpane").style.top = current_y + "px";}function doclick(colorValue) {    //alert(colorValue);     document.getElementById('color').value = colorValue;    document.getElementById("colorpane").style.display = "none";}function defaultColor() {    document.getElementById('color').value = '#FFFFFF'    document.getElementById("colorpane").style.display = "none";   }function colorclose() {    document.getElementById("colorpane").style.display = "none";     }function coloropen() {    document.getElementById("colorpane").style.display = "";}window.onload = initcolor;

0 0