首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

- Author -

蜗牛0912

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一个用js实现的页内搜索代码
May 23 Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
JavaScript 基本概念
Jan 20 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 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
XPathParser(1) xps(1) protocol(1) sock(2) sentinel(1) macos(1) mysqldump(1) csgo(1) ACID(1) Stater(1)
You might like
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
php简单实现MVC
2015/02/05 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
企业厂长岗位职责
2013/12/17 职场文书
关于运动会的口号
2014/06/07 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书