บทความนี้อธิบายการใช้ JS ของตัวเลือกสีที่สามารถรับค่าสีที่แตกต่างกัน แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <html>
<head>
<tite> ตัวเลือกสี JS คุณจะได้รับค่าสีที่แตกต่างกัน </title>
</head>
<body>
<อินพุต ID = KKK1 style = ตำแหน่ง: Absolute; ซ้าย: 0; TOP: 0>
<อินพุต ID = KKK2 style = ตำแหน่ง: Absolute; ซ้าย: 200; Top: 0>
<อินพุต ID = KKK3 style = ตำแหน่ง: Absolute; ซ้าย: 400; TOP: 0>
<อินพุต ID = KKK4 style = ตำแหน่ง: Absolute; ซ้าย: 600; TOP: 0>
<div id = rainbowdiv style = 'ตำแหน่ง: สัมบูรณ์; ซ้าย: 200; top: 30;'> </div>
<script>
var iw = '70'; // มีทั้งหมด 6 สีและความกว้างของแต่ละสีคือ iw iw*6 คือความกว้างของริบบิ้น
var ih = '400'; // ih คือความสูงของริบบิ้น
// คำนวณรหัสสี HSV
ฟังก์ชั่น 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;}
อื่น{
if (py == ih-1) h = s = v = 0;
อื่น{
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
ฟังก์ชั่น hsvtorgb (h, s, v) {
var i, f, p1, p2, p3;
var r = g = b = 0;
ถ้า (S <0) S = 0;
ถ้า (s> 1) s = 1;
ถ้า (v <0) v = 0;
ถ้า (v> 1) v = 1;
h %= 360;
ถ้า (h <0) h+= 360;
h /= 60;
i = math.floor (h);
f = สวัสดี;
P1 = V*(1-S);
p2 = v*(1-s*f);
P3 = V*(1-S*(1-F));
if (i == 0) {r = v; g = p3; b = p1;}
อื่นถ้า (i == 1) {r = p2; g = v; b = p1;}
อื่นถ้า (i == 2) {r = p1; g = v; b = p3;}
อื่นถ้า (i == 3) {r = p1; g = p2; b = v;}
อื่นถ้า (i == 4) {r = p3; g = p1; b = v;}
อื่นถ้า (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
ฟังก์ชั่น 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,0,0);
สำหรับ (var i = 0; i <6; i ++) {
var r1 = รุ้ง [i*3];
var g1 = รุ้ง [i*3+1];
var b1 = รุ้ง [i*3+2];
var r2 = รุ้ง [(i+1)*3];
var g2 = รุ้ง [(i+1)*3+1];
var b2 = รุ้ง [(i+1)*3+2];
Rainbowdiv.innerhtml+= "<div style = 'ตำแหน่ง: Absolute; ซ้าย:"+i*iw+"; top: 0; width:"+iw+"; ความสูง:"+ih+"; พื้นหลัง: rgb ("+r1+","+g1+","+b1+"); style = 'ตำแหน่ง: สัมบูรณ์; ซ้าย: "+i*iw+"; top: 0; width: "+iw+"; ความสูง: "+ih+"; พื้นหลัง: rgb ("+r2+", "+g2+", "+b2+");
-
Rainbowdiv.innerhtml += "<div สไตล์ = ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: 0; ความกว้าง: "+6*iw+"; ความสูง: "+ih+"; พื้นหลัง: rgb (128,128,128); ตัวกรอง: อัลฟ่า (opacity = 0, finishOpacity = 100, style = 1, starty = 0, finisy = 100, startx = 0)> 0) style = 'ตำแหน่ง: Absolute; ซ้าย: 0; Top: 0; Width: "+(6*iw+1)+"; ความสูง: "+ih+";' OnMousemove = HSV ()> </div> "
-
</script>
</body>
</html>
สำหรับการดำเนินงานสี JS เพิ่มเติมโปรดดูเครื่องมือสีของเว็บไซต์นี้:
เครื่องกำเนิดการเข้ารหัสสี RGB
เครื่องมือจับคู่สีเว็บออนไลน์
RGB Color Query Comparison Table_Color Code Table_Colour Name Name Collection
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน