تحديد لون من قبل المستخدم من خلال ثلاث مدخلات :
نعلم أنه بإمكاننا تحديد لون ما من خلال ثلاثة أرقام تحدد الألوان الأساسية وهي الأحمر والأخضر والأزرق
الرقم الأول يحدد مقدار اللون الأحمر والرقم الثاني يحدد مقدار اللون الأخضر والرقم الثالث يحد مقدار اللون الأزرق
سنقوم من خلال المثال التالي بتجريب هذه أرقام مختلفة لكل الألوان من خلال ادخال الأرقام من 0 حتى الرقم f
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<p> enter number from 0 to f :</p>
<input id="color1" type="text">
<input id="color2" type="text">
<input id="color3" type="text">
<button onclick="color();"> drow </button>
<div id="show"></div>
<script>
function color(){
var y="";
var c1=document.getElementById("color1").value;
var c2=document.getElementById("color2").value;
var c3=document.getElementById("color3").value;
y+='<div style="width:100px;height:50px;background-color:#'+c1+c2+c3+';border:1px solid #000;"></div>';
document.getElementById("show").innerHTML = y;
}
</script>
</body>
</html>
استدعاء التابع يتم عند الضغط على زر الرسم
يقوم التابع بجلب القيم المدخلة وإضافتها إلى لون خلفية الـ div التي قمنا بإنشاءها داخل وسمي السكربت ثم يقوم التابع بإضافتها إلى جسم البرنامج
مع الانتباه إلى الأرقام المدخلة وهي المصفوفة التالية:
0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , a , b , c , d , e , f
لوح الألوان :
يمكن عمل لوح الألوان من خلال تابع يحوي ثلاث حلقات متداخلة كل حلقة تبدأ من 0 وتنتهي عند طول المصفوفة التي تحدد الألوان
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.d {
display:inline-block;
margin:2px;
}
</style>
</head>
<body>
<div id="div1" style="">
</div>
<script>
var x=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
var y="";
for(i=0;i<x.length;i++){
for(j=0;j<x.length;j++){
for(q=0;q<x.length;q++){
y+='<div class="d" style="width:25px;height:25px;background-color:#'+x[i]+x[j]+x[q]+';"></div>';
}
}
}
document.getElementById("div1").innerHTML = y;
</script>
</body>
</html>
يمكن إضافة تابع يقوم بجلب اللون بالهكسا عند النقر عليه :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.d {
display:inline-block;
margin:0.5px;
margin-bottom:0.5px;
margin-top:0.3px;
}
#div1 {
width: 500px;
height: 300px;
line-height: 10%;
overflow: scroll;
}
</style>
</head>
<body>
<div id="div1" style="">
</div>
<input id="color" type="text">
<script>
var x=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
var y="";
for(i=0;i<x.length;i++){
for(j=0;j<x.length;j++){
for(q=0;q<x.length;q++){
y+='<div class="d" style="width:8px;height:8px;background-color:#'+x[i]+x[j]+x[q]+';" onclick="return hexcolor(this);"></div>';
}
}
}
document.getElementById("div1").innerHTML = y;
function hexcolor(x){
var c=x.style.backgroundColor;
document.getElementById("color").value=c;
}
</script>
</body>
</html>
تم إضافة بعض الخصائص لسهولة الوصول إلى الألوان و تحديد تباعدها
منها خاصية الـ scroll عند حصول طفح في حجم الـ div
وخاصية الارتفاع بين الـdivs التي تشكل الالوان حيث تم تقليلها إلى 10% وغيرها من خواص التباعد البسيطة
line-height: 10%; overflow: scroll;
