javascript颜色选择器

最新推荐文章于 2024-03-10 13:52:56 发布

程宇寒

最新推荐文章于 2024-03-10 13:52:56 发布

阅读量2.4k

点赞数 1

文章标签： javascript 颜色选择器浏览器浏览器不兼容

本文链接：https://blog.csdn.net/czh500/article/details/90320630

版权

javascript颜色选择器

直接po图和代码

color.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>颜色选择器</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/body.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mark.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/console.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/colpick.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/console.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/toTop.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/weChatQRCode.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.js"></script>
</head>
<body>

<h1>
以下2种颜色选择器都不能做到各个浏览器兼容(刚刚自己测试了一下)
</h1>
<ol type="a" start="5">
<li>火狐浏览器:第1种OK，第2种有问题</li>
<li>IE浏览器:第1种有问题，第2种OK</li>
</ol>

<div style="background-color: #CD0000;border: 5px solid #CD0000;color: white;height: 55px;">
(第1种颜色选择器)有一个问题，在火狐浏览器中给颜色赋值的时候，颜色默认没有#号，需要自己手动加上#号，而在IE浏览器中，颜色默认有#号，此时手动加
上#号，就会造成多出一个#号，所以就造成了在火狐中执行OK，IE中执行不OK的现象!
</div>
<h3>颜色选择器(第1种)</h3>
<input id="colorPicker" type="text">
<br><br>
<h3>颜色选择器(第2种)</h3>
<button id="colorSelector">颜色选择器</button>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/colpick.js"></script>
</body>


<script type="text/javascript">

$('#colorSelector').colpick({
    flat: true,
    layout: 'full',
    submit: true,
    width: 500,
    colorScheme: 'dark',
    color: "#bbbbbb",
    onChange: function (hsb, hex, rgb, el, bySetColor) {

    }, onSubmit: function (hsb, hex, rgb, el) {
        //处理你的业务需求
    }

}).keyup(function () {
    $(this).colpickSetColor(this.value);
}).colpickSetColor("blue");



//div层
document.write ("<div  id='colorPopup'  style=' position:absolute; z-index:100;  display:none; '></div>  ");
var oColorPopup=document.getElementById("colorPopup");
var oColorPicker=document.getElementById("colorPicker");
//在div层内显示颜色选择器函数(main)
function  showColorPicker()
{
    //判断选择器是否显示
    if(oColorPopup.style.display=="none")   {
        //获取鼠标的坐标值 for  IE、Firefox
        window.document.onclick=function(evt){
            //evt=evt || window.event;
            evt = evt ? evt : (window.event ? window.event : null);
            oColorPopup.style.left=evt.clientX+"px";
            oColorPopup.style.top=evt.clientY+"px";
            window.document.onclick=null;
        }
       oColorPopup.style.display="block";
    }
    else {
       oColorPopup.style.display="none";
    }
     initColor();
}
// 初始化颜色选择器函数
function initColor(){
    var baseColorHex=new Array('00','33','66','99','CC','FF');     //256色的颜色是用00,33,66,99,cc,ff组成
    var SpColorHex=new Array('000000','333333','666666','999999','cccccc','FFFFFF', 'FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF' );
    var colorRGB = "";
    var sColorPopup;
    sColorPopup="<table  width='260'  border='1'  cellPadding=1  cellSpacing=0   bordercolordark='#ffffff'  bordercolorlight='#000000'  bgcolor='#cccccc'  title='深度学习(js)颜色选择器' ><tr><td>";
    sColorPopup+="<input   id='colorDis'  style='width:50px;border:solid 1px #000000;background-color:#0000AA;margin-left:3px' disabled title='当前颜色' />";
    sColorPopup+=" <input id='colorHexDis'  style='width:100px;border:inset 1px;font-family:Arial;' type='text' value='#FFFF00' readonly title='当前颜色16进制值'/>";
    sColorPopup+="<input  type='button' style='border:outset 1px;font-family:Arial;font-size:20px;line-height:12px;width:30px;height:30px;margin-left:105px;margin-bottom:3px;cursor:pointer;' value='X' onclick='doClose()' title='关闭颜色选择器' />";
    sColorPopup+="</td></tr><tr><td>";
    sColorPopup+="<table  border='0' cellpadding='0' cellspacing='0' align='center' ><tr><td bgcolor='#000000' width='30'>";//1行2列
    //竖 start
    sColorPopup+="<table  border='0' cellpadding='0'  cellspacing='1' bgcolor='#000000' align='center' >";        //第1列
    for(i=0;i<12;i++)
    {
        sColorPopup+="<tr  height='12'>";
        colorRGB=SpColorHex[i];
        sColorPopup+="<td width='12' onmouseover='currentColor(this.bgColor)' onclick='clickColor(this.bgColor)'  bgColor='"+colorRGB+"' style='cursor:pointer;' title='点击选择颜色"+colorRGB+"'></td>";
        sColorPopup+="</tr>";
    }
    sColorPopup+="</table>";
    //竖 end
    sColorPopup+="</td><td>";
    sColorPopup+="<table  border='0'    cellpadding='0'    cellspacing='1'    bgcolor=#000000 align='center' >";    //第2列
    for(n=0;n<2;n++){    //循环2块
        for(i=0;i<6;i++) {  //每块6行
            sColorPopup+="<tr    height=12>";
            for(j=0+3*n;j<3+3*n;j++)
            {
                for(k=0;k<6;k++)
                {
                    colorRGB=baseColorHex[j]+baseColorHex[k]+baseColorHex[i];
                    sColorPopup+="<td  width='12' onmouseover='currentColor(this.bgColor)' onclick='clickColor(this.bgColor)'  bgColor='"+colorRGB+"' style='cursor:pointer;'  title='点击选择颜色"+colorRGB+"'></td>";
                }
            }
            sColorPopup+="</tr>";
        }
    }
    sColorPopup+="</table>";
    sColorPopup+="</td></tr></table>";
    sColorPopup+="</td></tr></table>";
    oColorPopup.innerHTML=sColorPopup;
}
//当前颜色块函数
function currentColor(colorStr)  {
    document.getElementById("colorDis").style.backgroundColor = "#" + colorStr;
    document.getElementById("colorHexDis").value = "#" + colorStr.toUpperCase();    //toUpperCase()方法将颜色值大写
}
//点击选择颜色函数
function clickColor(colorStr) {
    oColorPicker.style.backgroundColor = "#" + colorStr;
    oColorPicker.value = "#" + colorStr;
    oColorPopup.style.display = "none";
}
//关闭颜色选择器函数
function doClose() {
      oColorPopup.style.display="none";
}
//oColorPicker对象 绑定事件处理函数
oColorPicker.onclick=showColorPicker;

</script>
</html>

还有一个colpick.js文件，该文件大家直接在网上找吧，我也是网上找来直接使用的。