JS实现的系统调色板完整实例

本文实例讲述了JS实现的系统调色板。分享给大家供大家参考，具体如下：

运行效果图如下：

整体页面代码：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title>DW调色板</title>
<script type="text/javascript" language="javascript">
var ColorHex=new Array('00','33','66','99','CC','FF')
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var current=null
function getEvent()
{
  if(document.all)
  {
  return window.event;//如果是ie
  }
  func=getEvent.caller;
  while(func!=null)
  {
    var arg0=func.arguments[0];
    if(arg0)
    {
      if((arg0.constructor==Event || arg0.constructor ==MouseEvent)||(typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
      {
      return arg0;
      }
    }
    func=func.caller;
  }
  return null;
}
function intocolor()
{
  var colorTable=''
  for (i=0;i<2;i++)  //循环2部分
  {
    for (j=0;j<6;j++) //循环6行
    {
      colorTable=colorTable+'<tr height=12>'
      for (k=0;k<3;k++)
      {
        for (l=0;l<6;l++)
        {
          colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'
        }
      }
    }
  }
  colorTable='<table width=217 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
      +'<tr height=30><td colspan=21 bgcolor=#cccccc>'
      +'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
      +'<tr><td width="3"><td>当前色:</td><td><input type="text" name="DisColor" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#FFFFFF"></td>'
      +'<td width="3"><td><input type="text" name="HexColor" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#FFFFFF"></td></tr></table></td></table>'
      +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:hand;">'
      +colorTable+'</table>';
  colorpanel.innerHTML=colorTable
}
function doOver() {
  var evt=getEvent();
  var element=evt.srcElement || evt.target;
  var DisColor=document.getElementById("DisColor");
  var HexColor=document.getElementById("HexColor");
  if ((element.tagName=="TD") && (current!=element)) {
    if (current!=null){
      current.style.backgroundColor = current._background
    }
    element._background = element.style.backgroundColor
    DisColor.style.backgroundColor = rgbToHex(element.style.backgroundColor)
    HexColor.value = rgbToHex(element.style.backgroundColor)
    element.style.backgroundColor = "white"
    current = element
  }
}
function rgbToHex(aa)
{
  if(aa.indexOf("rgb") != -1)
  {
    aa=aa.replace("rgb(","")
    aa=aa.replace(")","")
    aa=aa.split(",")
    r=parseInt(aa[0]);
    g=parseInt(aa[1]);
    b=parseInt(aa[2]);
    r = r.toString(16);
    if (r.length == 1) { r = '0' + r; }
    g = g.toString(16);
    if (g.length == 1) { g = '0' + g; }
    b = b.toString(16);
    if (b.length == 1) { b = '0' + b; }
    return ("#" + r + g + b).toUpperCase();
  }
  else
  {
    return aa;
  }
}
function doOut() {
  if (current!=null) current.style.backgroundColor = current._background;
}
function doclick(){
  var evt=getEvent();
  var element=evt.srcElement || evt.target;
  if (element.tagName=="TD"){
    var bg=rgbToHex(element._background);
    document.getElementById("orange").value=bg;
    alert("选取颜色: "+bg);
    return bg;
  }
}
</script>
</head>
<body onload="intocolor()">
  <div id="colorpanel">
  </div>
  <table width=217 border="1" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">
  <tr height=30>
    <td colspan=21 bgcolor=#cccccc>
      <table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">
        <tr>
          <td>所选色:</td>
          <td><input id="orange" type="text" value="" size="20" /></td>
        </tr>
      </table>
    </td>
  </tr>
  </table>
</body>
</html>

PS：这里再为大家推荐几款本站的相关在线工具：

在线RGB、HEX颜色代码生成器：
http://tools./color/rgb_color_generator

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全：
http://tools./color/jPicker

在线网页调色板工具：
http://tools./color/color_picker

在线颜色选择器工具/RGB颜色查询对照表：
http://tools./color/colorpicker

更多关于JavaScript相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

# JS # 系统 # 调色板 # 用JavaScript仿PS里的羽化效果代码 # JS批量修改PS中图层名称的方法 # JS实现的在线调色板实例(附demo源码下载) # JS 网页安全色调色板 DW风格 # JavaScript使用Range调色及透明度实例 # 基于JavaScript实现随机颜色输入框 # JavaScript随机生成颜色的方法 # JavaScript制作颜色反转小游戏 # 漂亮! js实现颜色渐变效果 # JavaScript获取图片像素颜色并转换为box-shadow显示 # js实现按钮颜色渐变动画效果 # js实现的简单radio背景颜色选择器代码 # js实现的在线调色板功能完整实例 # 对照表 # 相关内容 # 遍历 # 数据结构 # 给大家 # 更多关于 # 所述 # 几款 # 程序设计 # 所选 # 再为 # 选择器 # 代码生成器 # 讲述了 # window # event # document # return # func # arguments

返回目录在线咨询

上一篇：橙子建站转化组件添加指南：表单电话配置与在线咨询设置技巧
下一篇： asp网站制作实例图,怎么样能让自己的电脑做成ASP网站服务器都需要哪些软件？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JS实现的系统调色板完整实例

您的项目需求