【JavaScript】颜色选择器
颜色空间RGB与HSV(HSL)的转换
好文推荐:http://blog.csdn.net/jiangxinyu/article/details/8000999
从 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都太高端了,都实现了颜色渐变功能,我要的不需要那么复杂,只想提供几 ...
随机推荐
- Jsp&Servlet入门级项目全程实录第1讲
惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 1.jdbc数据库连接(略) 2.登录表单 2.1设置内边距 <dir style="padding- ...
- visualvm 插件 visual gc 使用介绍
visual gc 是 visualvm 中的图形化查看 gc 状况的插件. 具体详细介绍可参照: http://www.oracle.com/technetwork/java/visualgc-13 ...
- 【转】golang的channel的几种用法
关闭2次 ch := make(chan bool) close(ch) close(ch) // 这样会panic的,channel不能close两次 读取的时候channel提前关闭了 ch : ...
- Django框架model实现数据库增删查改
1.创建Django工程 https://www.cnblogs.com/CK85/p/10159159.html 2.在model.py中配置生成表格的类对象. from django.db imp ...
- Zookeeper + Guava loading cache 实现分布式缓存
1. 概述 项目中,创建的活动内容存入redis,然后需要用到活动内容的地方,从redis去取,然后参与计算. 活动数据的一个特点是更新不频繁.数据量不大.因为项目部署一般是多机器.多实例,除了red ...
- JS获取第二个横杠后面的内容
假设数据为: let str = "zheng-shize-zsz"; 获取第一个横杠的位置: str.indexOf("-") 1. 那获取第二个横杠怎么写呢 ...
- .NET AOP微型框架发布 --CleanAOP
CleanAOP--简介 作者:立地(欧文) 邮箱:jarvin_g@126.com 导语: AOP为Aspect Oriented Programming的缩写. 意为:面向切面编程.将日志记录,性 ...
- LeetCode 1. Two Sum （JavaScript）
1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to a ...
- Git与Github。
Git是一款免费,开源的分布是版本,用于敏捷高效的处理任何或小或大的项目.分布式相对于集中式的最大区别在于开发者可以提到本地,每个开发者通过克隆,在本地磁盘内拷贝一个完整的GIt仓库. Git的功能特 ...
- .net core系列之《将.net core应用部署到Ubuntu》
1.首先准备一个演示项目. 2.然后将这个项目用FileZilla工具上传到Ubuntu中. 3.进入目标文件,接下来有两种方法来部署项目 a.用dotnet run命令 root@hhz-virtu ...