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

网络编程 2024/11/19 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

本文实例讲述了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)"<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程序设计有所帮助。

js,得到颜色值,不同颜色值,颜色值,颜色选择器

标签：

js,得到颜色值,不同颜色值,颜色值,颜色选择器

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

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

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月19日

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

js,得到颜色值,不同颜色值,颜色值,颜色选择器

JavaScript操作Cookie详解

Windows系统中安装nodejs图文教程

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接