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


Posted in Javascript onDecember 21, 2016

本文实例讲述了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>
Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
二行代码解决全部网页木马
Mar 28 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
微信小程序 form组件详解
Oct 25 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
如何编写jquery插件
Mar 29 jQuery
简单谈谈axios中的get,post方法
Jun 25 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
基于jPlayer三分屏的制作方法
Dec 21 #Javascript
js实现的简练高效拖拽功能示例
Dec 21 #Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 #Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 #Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 #Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 #Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 #Javascript
You might like
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
原生js轮播特效
2017/05/18 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python将视频转换为全字符视频
2019/04/26 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
往来会计岗位职责
2013/12/19 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
团队经理竞聘书
2014/03/31 职场文书
高中生操行评语
2014/04/25 职场文书
植树节活动总结
2014/04/30 职场文书
出租房屋协议书
2014/09/14 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
详解Oracle块修改跟踪功能
2021/11/07 Oracle
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫