تصف هذه المقالة تنفيذ JS لمحددات الألوان التي يمكنها الحصول على قيم ألوان مختلفة. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <html>
<head>
<title> محدد ألوان JS ، يمكنك الحصول على قيم ألوان مختلفة </title>
</head>
<body>
<input id = kkk1 style = الموضع: مطلق ؛ اليسار: 0 ؛ أعلى: 0>
<input id = kkk2 style = الموضع: مطلق ؛ اليسار: 200 ؛ أعلى: 0>
<input id = kkk3 style = الموضع: مطلق ؛ اليسار: 400 ؛ أعلى: 0>
<input id = kkk4 style = الموضع: مطلق ؛ اليسار: 600 ؛ أعلى: 0>
<div id = rainbowdiv style = 'الموضع: مطلق ؛ اليسار: 200 ؛ أعلى: 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 ؛
if (v> 1) v = 1 ؛
H ٪ = 360 ؛
إذا (H <0) H+= 360 ؛
H /= 60 ؛
i = math.floor (h) ؛
و = مرحبا ؛
p1 = v*(1-s) ؛
p2 = v*(1-s*f) ؛
p3 = v*(1-s*(1-f)) ؛
if (i == 0) {r = v ؛ G = P3 ؛ ب = p1 ؛}
آخر إذا (i == 1) {r = p2 ؛ g = v ؛ ب = p1 ؛}
آخر إذا (i == 2) {r = p1 ؛ g = v ؛ ب = p3 ؛}
آخر إذا (i == 3) {r = p1 ؛ g = p2 ؛ ب = v ؛}
آخر if (i == 4) {r = p3 ؛ G = P1 ؛ ب = v ؛}
آخر إذا (i == 5) {r = v ؛ G = P1 ؛ ب = 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 ؛
}
وظيفة window.onload () {
Var Rainbow = صفيف جديد (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 = 'الموضع: المطلق ؛ اليسار:"+i*iw+"؛ top: 0 ؛ width:"+iw+"؛ الارتفاع:"+ih+" style = 'الموضع: مطلق ؛ اليسار: "+i*iw+" ؛ top: 0 ؛ العرض: "+iw+" ؛ الارتفاع:
}
Rainbowdiv.innerhtml += "<div النمط = الموضع: المطلق ؛ اليسار: 0 ؛ أعلى: 0 ؛ العرض: "+6*iw+" style = 'الموضع: مطلق ؛ اليسار: 0 ؛ أعلى: 0 ؛ العرض: "+(6*iw+1)+" ؛ الارتفاع: "+ih+" ؛ "؛ onMousemove = HSV ()> </viv> "
}
</script>
</body>
</html>
لمزيد من عمليات ألوان JS ، يرجى الرجوع إلى أدوات ألوان هذا الموقع:
مولد ترميز اللون RGB
أداة مطابقة ألوان الويب عبر الإنترنت
RGB COLAL CONSER COMPARISN
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.