【JavaScript】颜色选择器

颜色空间RGB与HSV(HSL)的转换

从 HSV 到 RGB 的转换

类似的，给定在 HSV 中 (h, s, v) 值定义的一个颜色，带有如上的 h，和分别表示饱和度和明度的 s 和 v 变化于 0 到 1 之间，在 RGB 空间中对应的 (r, g, b) 三原色可以计算为：

对于每个颜色向量 (r, g, b),

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Untitled Document</title>

</head>

<body>

<script type="text/JavaScript">

<!--

var colorPicker = function(idStr){

 this.colorPool = ["#000000","#993300","#333300","#003300","#003366","#000080","#333399","#333333","#800000","#FF6600","#808000","#008000","#008080","#0000FF","#666699","#808080","#FF0000","#FF9900","#99CC00","#339966","#33CCCC","#3366FF","#800080","#999999","#FF00FF","#FFCC00","#FFFF00","#00FF00","#00FFFF","#00CCFF","#993366","#CCCCCC","#FF99CC","#FFCC99","#FFFF99","#CCFFCC","#CCFFFF","#99CCFF","#CC99FF","#FFFFFF"];

 this.initialize(idStr);

}

colorPicker.prototype = {

 initialize: function(idStr){

  var count=0;

  var html = '';

  var self = this;

  html+= '<table cellspacing="5" cellpadding="0" border="2" bordercolor="#000000" style="cursor:pointer;background:#ECE9D8" mce_style="cursor:pointer;background:#ECE9D8" >';

  // html+= '<tr><td align="center" colspan="8" width="160" height="20" id="currentColor" bgcolor="#ffffff">当前颜色</td></tr>';

  for(i=0;i<5;i++)

  {

   html+= "<tr>";

   for(j=0;j<8;j++)

   {

    html+= '<td align="center" width="20" height="20" style="background:'+ this.colorPool[count]+'" mce_style="background:'+ this.colorPool[count]+'" unselectable="on"> </td>';

    count++;

   }

   html+= "</tr>";

  }

  html+= '</table>';

  this.trigger = document.getElementById(idStr);

  this.div = document.createElement('div');

  this.div.innerHTML = html;

  var tds = this.div.getElementsByTagName('td');

  for(var i=0,l=tds.length;i<l;i++){

   tds[i].onclick = function(){

    self.setColor(this.style.backgroundColor);

   }

  }

  this.div.id = 'myColorPicker';

  this.trigger.parentNode.appendChild(this.div);

  this.div.style.position = 'absolute';

  this.div.style.left = this.trigger.offsetLeft + 'px'

  this.div.style.top = (this.trigger.clientHeight + this.trigger.offsetTop)+ 'px';

  //this.hide();

  this.trigger.onclick = function(){

   if(self.div.style.display == 'none'){

    self.show();

    return false;

   }else{

    self.hide();

    return false;

   }

  }

 },

 setColor : function(c){

  this.hide();

  document.getElementById('demo').style.backgroundColor = c //proEditor.setColor(c); //自己定义函数决定setColor的功能

 },

 hide : function(){

  this.div.style.display = 'none'

 },

 show : function(){

  this.div.style.display = 'block'

 }

}

// -->

</script>

<div >

<a href="#" mce_href="#" onclick="initColorPicker();return false" id="demo" style="position:absolute;left:200px">颜色选择</a>

</div>

<script type="text/javascript">

<!--

function initColorPicker(){

 picker = new colorPicker('demo');

}

// -->

</script>

</body>

</html>

【JavaScript】颜色选择器的更多相关文章

11个JavaScript颜色选择器插件
几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...
JavaScript颜色选择器的实现
下面的JavaScript取色器可以方便网页设计取色,同时也可以看一下,网上常见的取色器是如何实现的.这里只给出了核心的JavaScript代码,其它部分比如CSS可以参照本页的源代码. JavaSc ...
10个精选的颜色选择器Javascript脚本及其jQuery插件
Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本实现及其传说中的jQuery插件实现 ...
改造过的JS颜色选择器
项目中用到颜色选择功能,在网上找了个颜色选择器,自己改了改代码.做成了一个可动态加载的颜色选择器. 把代码贴上,当是记录. /*Copyright(c)2009,www.supersite.me*/ ...
HTML5的input color系统颜色选择器
前两天,我写了一篇<推荐两款jQuery色盘选择器>介绍,那是使用JavaScript实现的色盘,今天我给大家介绍HTML5的色盘选择器.HTML5有一个input类型为color,即颜色 ...
H5选择颜色-前端颜色选择器
开发一年多了,一直用angular2框架,框架虽然能大大减少程序员的工作量,但我还是更喜欢用原生的技术写代码. 原生的就像内功心法,框架是招式,招式虽然实用,但是想成为高手还是得有内功修养. 不多说, ...
html 颜色选择器亲测，很好用
@*以下是测试html 颜色选择器的*@ @*<a href="#" mce_href="#" onclick="initColorPicke ...
c#/asp.net实现炫酷仿调色板/颜色选择器功能
asp.net 之颜色选择器,仿调色板功能 1. 插件非常容易使用,只需引用相应的js文件和css样式文件即可,见代码示例,插件精小,炫酷 2. 只需要初始化即可使用,并且选择的颜色会在文本框中以16 ...
UWP 颜色选择器(ColorPicker) 和自定义的Flyout(AdvancedFlyout)
ColorPicker 故事背景项目里面需要一个像Winfrom里面那样的颜色选择器,如下图所示: 在网上看了一下.没有现成的东东可以拿来使用.大概查看了一下关于颜色的一些知识,想着没人种树,那就由 ...
自定义实现简单的Android颜色选择器（附带源码）
在写Android App过程中需要一个简单的颜色选择器,Android自带的ColorPicker和网上的一些ColorPicker都太高端了,都实现了颜色渐变功能,我要的不需要那么复杂,只想提供几 ...

随机推荐

ASP.NET 简单的柱形图实现（附带示例）
对于一些内部系统的项目,各种图表是在所难免的,因为图表可以更加清晰的表达出想看到的数据. 因为之前从来没有做过关于图表的东西,唯一能想到的就是“验证码”,所以应该是一个思路,用GDI去搞. 数据懒着去 ...
ssm项目快速搭建（注解）
dao层配置 dao层配置注意事项: 1.Mapper.xml 文件中的 namespace 与 mapper 接口的类路径相同 2.Mapper.xml 接口方法名和 Mapper.xml 中定义的 ...
【SSH网上商城项目实战21】从Demo中看易宝支付的流程
转自: https://blog.csdn.net/eson_15/article/details/51447492 这一节我们先写一个简单点的Demo来测试易宝支付的流程,熟悉这个流程后, ...
分ip统计网站访问次数
package web.listener; import javax.servlet.ServletContext; import javax.servlet.ServletContextEvent; ...
mysql设置不区分大小写
1.windows下到安装mysql的目录,修改my.ini文件在文件最后一行加上下面一句话 lower_case_table_names=1 lower_case_table_names = 1 ...
gulp & webpack整合
为什么需要前端工程化? 前端工程化的意义在于让前端这个行业由野蛮时代进化为正规军时代,近年来很多相关的工具和概念诞生.好奇心日报在进行前端工程化的过程中,主要的挑战在于解决如下问题:✦ 如何管理多个项 ...
KaTeX.js
KaTeX.js 官网:https://khan.github.io/KaTeX/
Activity 四种launchMode
launchMode在多个Activity跳转的过程中扮演着重要的角色,它可以决定是否生成新的Activity实例,是否重用已存在的 Activity实例,是否和其他Activity实例公用一个tas ...
seacms 6.45 命令执行漏洞分析
前言这是一个比较老的漏洞了,不过漏洞原理还是挺有意思的. 正文漏洞位于 search.php 文件中. 首先包含了 common.php, 这个文件里面做了一些初始化工作,其中最重要的是对提交参数 ...
SqlServer数据库(可疑)的解决办法
当数据库发生这种操作故障时,可以按如下操作步骤可解决此方法, 打开数据库里的Sql 查询编辑器窗口,运行以下的命令. // 1.使用指定值强制重新配置:(1.0表示为真假) sp_configure ...

【JavaScript】颜色选择器

从 HSV 到 RGB 的转换

【JavaScript】颜色选择器的更多相关文章

随机推荐

热门专题