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 相关文章推荐
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 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 curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
vue 自定义右键样式的实例代码
2019/11/06 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python守护线程用法实例
2017/06/23 Python
Python中 map()函数的用法详解
2018/07/10 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
Python中按键来获取指定的值
2019/03/02 Python
超简单的Python HTTP服务
2019/07/22 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
公司节能减排倡议书
2014/05/14 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
承诺书范本
2015/01/21 职场文书
继续教育个人总结
2015/03/03 职场文书
开场白怎么写
2015/06/01 职场文书
初中毕业生感言
2015/07/31 职场文书