zoukankan      html  css  js  c++  java
  • JavaScript Color Picker

    将下面的代码保存为color_panel.js文件,代码如下:

    function cpSetColor(obj_id,v)
    {
     var o = document.getElementById('bg_ColorPanel');
     o.style.display = "none";
     document.getElementById(obj_id).value = v.toUpperCase();
     document.getElementById(obj_id).style.backgroundColor = v;
    }

    function setIsc(color_value)
    {
     var o = document.getElementById("isc");
     o.bgColor = color_value;
     o.innerText = color_value;
    }

    function colorPanel(obj_id)
    {
     var hc = ["FF","CC","99","66","33","00"];
     var s = "",i = 0;
     var r,g,b,color;

     var ocp = document.getElementById('bg_ColorPanel');
     var oo = document.getElementById(obj_id);
     if (ocp==null)
     {
      ocp = document.createElement("div");
      ocp.id = "bg_ColorPanel";
      document.body.insertBefore(ocp);
     } 
     ocp.style.cssText = "position:absolute;left:"+(findPosX(oo)+oo.offsetWidth+20)+"px;top:"+(findPosY(oo)-60)+"px;background-color:#ffffff;border:1px solid #CCCCCC;padding:1px;200px;cursor:hand";

     s = "<table cellspacing=1 cellpadding=0><tr>";
     for(r=0;r<6;r++)
     {
      for(g=0;g<6;g++)
      {
       for(b=0;b<6;b++)
       {
        color = hc[r] + hc[g] + hc[b];
        if (i%18==0 && i>0) s += "</tr><tr>";
        s += "<td bgcolor='#"+color+"' height='10' width='10' onclick='cpSetColor(\""+obj_id+"\",this.bgColor)' onmouseover='setIsc(this.bgColor.toUpperCase());'></td>";
        i++;
       }
      }
     }
     s += "</tr><tr><td height='10' colspan='16' id='isc' style='font-family:Tamoha;font-size:10px;text-align:center;cursor:default;'></td><td bgcolor='#000000' height='10' colspan='2' onclick='cpSetColor(\""+obj_id+"\",\"transparent\")' onmouseover='setIsc(\"transparent\");' title='透明(transparent)'></td></tr></table>";
     ocp.innerHTML = s;
     ocp.style.display = "block";

     var mouse_inside = false;
     document.onmousedown = function(evt)
     {
      if(!mouse_inside)
      {
       ocp.style.display = "none";
      }
     }

     ocp.onmouseover = function()
     {
      mouse_inside = true;
     }

     ocp.onmouseout = function()
     {
      mouse_inside = false;
     }
    }

    将color_panel.js文件引用到你的HTML页面中
    在<body>下面加入HTML代码,如下:
     用到的图片:
    <input id="body_bg_color" size="10" class="clsInput" type="text" onpropertychange="setBodyBG();" />
    <img src="/images/pickColor.gif" width="20" height="20" align="absbottom" style="cursor:hand;" onclick="colorPanel('body_bg_color');" />

    然后保存为HTML文件就可以了。

  • 相关阅读:
    ansible 通过跳板机发布服务
    etcd API 神坑
    golang 条件编译
    服务治理
    golang web服务器处理前端HTTP请求跨域的方法
    rebar使用
    Apache/Tomcat/JBOSS/Jetty/Nginx/WebLogic/WebSphere之间的区别区别
    运维专家写给年轻运维的6条人生忠告
    谷歌浏览器书签索引—知识的海洋都在里面
    关于认识、格局、多维度发展的感触
  • 原文地址:https://www.cnblogs.com/cztom/p/777521.html
Copyright © 2011-2022 走看看