js實(shí)現(xiàn)可得到不同顏色值的顏色選擇器實(shí)例
本文實(shí)例講述了js實(shí)現(xiàn)可得到不同顏色值的顏色選擇器。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<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為色帶的高。
//計(jì)算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);
}
//計(jì)算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))
}
//計(jì)算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顏色查詢對(duì)照表_顏色代碼表_顏色的英文名稱大全
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
TypeScript核心設(shè)計(jì)原則之一就是類型檢查，通過(guò)使用接口(Interfaces)可以進(jìn)行類型檢查，滿足傳統(tǒng)面向?qū)ο笏枷?，利于有效開(kāi)發(fā)，有效避免類型轉(zhuǎn)換問(wèn)題。2015-06-06
這篇文章主要介紹了JavaScript中Cookie操作實(shí)例,本文先是講解了Cookie的語(yǔ)法,然后給了實(shí)際操作實(shí)例,需要的朋友可以參考下2015-01-01
記錄我看到之后，不得不贊的代碼片段。本貼板內(nèi)容將不斷更新，歡迎關(guān)注2013-06-06
下面小編就為大家?guī)?lái)一篇js調(diào)用屏幕寬度的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
本篇文章主要是對(duì)js中indexof的用法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
微信小程序網(wǎng)絡(luò)請(qǐng)求模塊封裝的具體實(shí)現(xiàn)
大家做小程序項(xiàng)目的時(shí)候肯定會(huì)遇到數(shù)據(jù)對(duì)接需求,下面這篇文章主要給大家介紹了關(guān)于微信小程序網(wǎng)絡(luò)請(qǐng)求模塊封裝的具體實(shí)現(xiàn),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
JavaScript最少知識(shí)原則介紹與體現(xiàn)
最少知識(shí)原則（LKP）說(shuō)的是一個(gè)軟件實(shí)體應(yīng)當(dāng)盡可能少地與其他實(shí)體發(fā)生相互作用。這里的軟件實(shí)體是一個(gè)廣義的概念，不僅包括對(duì)象，還包括系統(tǒng)、類、模塊、函數(shù)、變量等2022-08-08
javascript實(shí)現(xiàn)的時(shí)間格式加8小時(shí)功能示例
這篇文章主要介紹了javascript實(shí)現(xiàn)的時(shí)間格式加8小時(shí)功能,涉及javascript日期時(shí)間轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
JavaScript中獲得CheckBox狀態(tài)的方法小結(jié)
在 JavaScript 中,獲取復(fù)選框（CheckBox）的狀態(tài)（選中或未選中）可以通過(guò)以下幾種方式實(shí)現(xiàn),以下是具體方法及示例,并通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
JavaScript實(shí)現(xiàn)查找字符串中第一個(gè)不重復(fù)的字符
這篇文章主要介紹了JavaScript實(shí)現(xiàn)查找字符串中第一個(gè)不重復(fù)的字符,需要的朋友可以參考下2014-12-12