js实现可得到不同颜色值的颜色选择器实例
本文实例讲述了js实现可得到不同颜色值的颜色选择器。分享给大家供大家参考。具体实现方法如下：
<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颜色操作可参考本站颜色工具：
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
![JS 字符串连接[性能比较]](//img.jbzj.com/images/xgimg/bcimg0.png)
js字符串连接实现代码。2009-05-05
这篇文章主要为大家详细介绍了JavaScript前端中的常见异常以及如何捕获这些异常,文中的示例代码讲解详细,需要的小伙伴可以参考一下2024-03-03
这篇文章主要介绍了javascript实现根据时间段显示问候语的方法,涉及javascript时间与字符串的相关操作技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了webpack开发环境和生产环境的深入理解，详细的介绍了什么是开发环境和生产环境并配置，非常具有实用价值，需要的朋友可以参考下2018-11-11
在JavaScript中，为了实现表现和控制相分离，可以通过0级的DOM事件属性或者2级的事件模型来实现，不过这两者在针对某个事件类型调用相应的事件句柄的时候，不能给事件句柄提供参数，也就是说，事件属性的值只能是一个函数引用。2009-03-03
比较全的 js事件，大家可以快速的掌握 js事件效果代码。2009-07-07
这篇文章主要介绍了点击button获取text内容并改变样式的js实现,经测试非常实用，需要的朋友可以参考下2014-09-09
这篇文章主要介绍了JS ES6展开运算符的几个妙用，想了解ES6的同学，可以参考下2021-04-04
在JavaScript中，一切都是对像，函数是第一型2010-10-10
在开发应用程序时,数组常用于存储多个元素（如数字、字符串、对象等）,然而,在某些场景下,你可能需要将数组清空,本文主要介绍了typescript 将数组清空的方法实现,感兴趣的可以了解一下2024-08-08
![JS 字符串连接[性能比较]](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论