js实现可得到不同颜色值的颜色选择器实例


Posted in Javascript onFebruary 28, 2015

本文实例讲述了js实现可得到不同颜色值的颜色选择器。分享给大家供大家参考。具体实现方法如下:

<html>

<head>

<title>js颜色选择器,可得到不同的颜色值</title>

</head>

<body>

<input id=kkk1 style=position:absolute;left:0;top:0>

<input id=kkk2 style=position:absolute;left:200;top:0>

<input id=kkk3 style=position:absolute;left:400;top:0>

<input id=kkk4 style=position:absolute;left:600;top:0>

<div id=RainBowDiv style='position:absolute;left:200;top:30;'></div>

<script>

var iW = '70';//共有6种颜色,每种颜色的宽为iW。iW*6为色带的宽。

var iH = '400';//iH为色带的高。

//计算HSV颜色代码。

function HSV(){

kkk1.value = 'X:'+event.offsetX+'   Y:'+event.offsetY;

var H,S,V;

var pY = event.offsetY;

if(pY == 0){H = S = 0; V = 100;}

else{

 if(pY == iH-1) H = S = V = 0;

 else{

  H = Math.floor(360*event.offsetX/(iW*6));

  S = Math.round(50*(iH-pY)/(iH/2));

  V = Math.round(100-50*pY/iH);

  }

 }

kkk2.value='HSV('+H+','+S+'%,'+V+'%)';

HSVtoRGB(H,S/100,V/100);

}
//计算RGB颜色代码。

function HSVtoRGB(h,s,v){

var i, f ,p1 ,p2 ,p3;

var r = g = b = 0;

if(s < 0) s=0;

if(s > 1) s=1;

if(v < 0) v=0;

if(v > 1) v=1;

h %= 360;

if(h < 0) h+=360;

h /= 60;

i = Math.floor(h);

f = h-i;

p1 = v*(1-s);

p2 = v*(1-s*f);

p3 = v*(1-s*(1-f));

if(i == 0){r=v; g=p3; b=p1;}

else if(i == 1){r=p2; g=v; b=p1;}

else if(i == 2){r=p1; g=v; b=p3;}

else if(i == 3){r=p1; g=p2; b=v;}

else if(i == 4){r=p3; g=p1; b=v;}

else if(i == 5){r=v; g=p1; b=p2;}

kkk3.value='RGB('+Math.round(r*255)+','+Math.round(g*255)+','+Math.round(b*255)+')';

RGBtoHTML(Math.round(r*255),Math.round(g*255),Math.round(b*255))

}
//计算HTML颜色代码。

function RGBtoHTML(r,g,b){

r=(r>=16)?r.toString(16):('0'+r.toString(16))

g=(g>=16)?g.toString(16):('0'+g.toString(16))

b=(b>=16)?b.toString(16):('0'+b.toString(16))

kkk4.value='HTML #'+r+g+b;

}
function window.onload(){

var RainBow = new Array(255,0,0,  255,255,0,  0,255,0,  0,255,255,  0,0,255,  255,0,255,  255,0,0);

for(var i=0;i<6;i++){

 var R1 = RainBow[i*3];

 var G1 = RainBow[i*3+1];

 var B1 = RainBow[i*3+2];

 var R2 = RainBow[(i+1)*3];

 var G2 = RainBow[(i+1)*3+1];

 var B2 = RainBow[(i+1)*3+2];

 RainBowDiv.innerHTML += "<div style='position:absolute;left:"+i*iW+";top:0;width:"+iW+";height:"+iH+";background:rgb("+R1+","+G1+","+B1+");'></div><div style='position:absolute;left:"+i*iW+";top:0;width:"+iW+";height:"+iH+";background:rgb("+R2+","+G2+","+B2+");filter:alpha(opacity=0,finishopacity=100,Style=1);'></div>"

 }

RainBowDiv.innerHTML += "<div style=position:absolute;left:0;top:0;width:"+6*iW+";height:"+iH+";background:rgb(128,128,128);filter:alpha(opacity=0,finishOpacity=100,style=1,starty=0,finishy=100,startx=0,finishx=0)></div><div style='position:absolute;left:0;top:0;width:"+(6*iW+1)+";height:"+iH+";' onmousemove=HSV()></div>"

}

</script>

</body>

</html>

更多js颜色操作可参考本站颜色工具:

RGB颜色编码生成器

在线网页配色工具

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 #Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 #Javascript
浅谈JavaScript数据类型及转换
Feb 28 #Javascript
javaScript基础语法介绍
Feb 28 #Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 #Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 #Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 #Javascript
You might like
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python获取txt文件词向量过程详解
2019/07/05 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python绘制雪景图
2019/12/16 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
应聘自荐书
2013/10/08 职场文书
村委会主任先进事迹
2014/01/15 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
网络技术专业推荐信
2014/02/20 职场文书
技校毕业生自荐信
2014/06/03 职场文书
最美乡村教师观后感
2015/06/11 职场文书