【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都太高端了,都实现了颜色渐变功能,我要的不需要那么复杂,只想提供几 ...

随机推荐

传统的MapReduce框架慢在那里
为什么之前的MapReduce系统比较慢常理上有几个理由使得MapReduce框架慢于MPP数据库: 容错所引入的昂贵数据实体化(data materialization)开销. 孱弱的数据布局(d ...
常见IT英语短语一
SSO (Single sign-on)单点登陆. aspect-oriented programming,AOP面向切面. CORS:Cross-origin resource sharing跨域资 ...
HDU 1874(简单最短路) （大优化）
优先队列那里用greater会报错 http://acm.hdu.edu.cn/showproblem.php?pid=1874 /* 使用pair代替结构 */ #include <iostr ...
csharp: read excel using Aspose.Cells
/// <summary> /// /// </summary> /// <param name="strFileName"></para ...
Luogu3307：[SDOI2013]项链
传送门求每个珠子的方案数即有序的求三元组 \((x,y,z),x,y,z\le a\) 满足 \(gcd(x,y,z)=1\) 设 \(G_i\) 表示 \(i\) 个小于等于 \(a\) 的有序 ...
css3怎么分清伪类和伪元素
伪类用于向某些选择器添加特殊的效果. 伪元素用于将特殊的效果添加到某些选择器. 伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lan ...
Tabindex
1.tabindex 属性可以设置键盘中的TAB键在控件中的移动顺序,及焦点的顺序 2. tabindex 属性值范围在1到32767之间 3. 默认的 tabindex 的值为 0 ,将排在所有指定 ...
ES6框架的搭建
1.引入traceur.js http://google.github.io/traceur-compiler/bin/traceur.js 2.将Traceur编译器用于网页 new traceu ...
Spring Tech
1.Spring中AOP的应用场景.Aop原理.好处? 答:AOP--Aspect Oriented Programming面向切面编程:用来封装横切关注点,具体可以在下面的场景中使用: Authen ...
#include <unistd.h> 的作用
原文:http://blog.csdn.net/ybsun2010/article/details/24832113 由字面意思,unistd.h是unix std的意思,是POSIX标准定义的uni ...

【JavaScript】颜色选择器

从 HSV 到 RGB 的转换

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

随机推荐

热门专题