Bu örnekte Web sayfası oluştururken kullandığımız arka plan renklerinin kodlarının rastgele bir buton yardımıyla oluşturulması anlatılıyor. Sayfadaki 'Rastgele Renk' butonuna basılınca sayfa rastgele bir renge bürünmekte ve renk kodu text alanında görünmektedir.
1 <html><head> 2 <title>java örnekleri</title> 3 <SCRIPT LANGUAGE="JavaScript"> 4 var materials=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
5 var row1;
6 var row2;
7 var row3;
8 var row4;
9 var row5;
10 var row6;
11 var part1;
12 var part2;
13 var part3;
14 var part4;
15 var part5;
16 var part6;
17 var bcolor;
18 function setBackcolor(){
19 row1=randomNum();
20 row2=randomNum();
21 row3=randomNum();
22 row4=randomNum();
23 row5=randomNum();
24 row6=randomNum();
25 part1=materials[row1];
26 part2=materials[row2];
27 part3=materials[row3];
28 part4=materials[row4];
29 part5=materials[row5];
30 part6=materials[row6];
31 bcolor=part1+part2+part3+part4+part5+part6;
32 document.bgColor=bcolor;
33 document.forms[0].colorCode.value="#"+bcolor+"#";
34 }
35 function randomNum(){
36 var num=Math.random();
37 num=Math.floor(num*15.999);
38 return num;
39 }
40 </SCRIPT> 41 </head> 42 <body bgcolor="000000"> 43 <center><form> 44 <input type="button" value="Background Rengini Değiştir" onClick="setBackcolor();"><br> 45 <input type="text" name="colorCode" value="#000000#" size=7> 46 </form> 47 </center> 48 <body> 49 </html>
Açıklama
Sayfada bir text alanı ve bir düğme bulunmakta. Düğmeye basıldığında setBackcolor() foksiyonu çağrılmakta ve sayfanın background'unun rengi rastgele bir şekilde değiştirilmektedir. Yeni rengin kodu ise text alanında gösterilmektedir.
Renk Modeli
En önemli renk modeli rgb(red green blue) modelidir. Tüm renkler kırmızı,yeşil ve mavinin değişik oranlarda birleşmesinden elde edilebilir. Örneğin siyah #000000 ile temsil edilir. Kırmızı ise ff0000 ile temsil edilir. Burada 16'lık sayı sitemi kullanılır. a 10,b 11,c 12,d 13 e 14 ve f 15'e karşılık gelir. 0 ile birlikte 16 sayıdır. Örneğin beyaz için #ffffff verilebilir. Bu 16 sasyının değişik değerleri bize değişik renkler vermektedir.
setBackcolor() fonksiyonu önce 6 tane 0 ile 16 arası rastgele sayı üretir. Bu sayılar birleştirilerek rgb modeline göre renk elde edilir. Daha sonra bu renk ile document.bgColor set edilir ve document'in(sayfanın) backgroud'u değiştirilir. Ve text alanında rengin kodu gözükür.
