Bu örnekte JavaScript ile Range elementlerini kullanarak sayfa arkaplan rengi değiştireceğiz. Örneğimizde 3 adet input range kontrolü RGB (Red, Green, Blue) değerlerinin 0-255 arası değerler üreterek CSS ile arkaplan renk değişikliği yapacak.
Örneğe ait ekran görüntüsü aşağıdaki gibi olacaktır.
range1.html Kodları:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> .slider { -webkit-appearance: none; width: 100%; height: 25px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; background: #4CAF50; cursor: pointer; } .slider::-moz-range-thumb { width: 25px; height: 25px; background: #4CAF50; cursor: pointer; } </style> </head> <body> Red<input type="range" id="red" min="0" max="255" value="0" class="slider"> Green<input type="range" id="green" min="0" max="255" value="0" class="slider"> Blue<input type="range" id="blue" min="0" max="255" value="0" class="slider"> <script> function renk(){ var r=red.value; var g=green.value; var b=blue.value; //document.body.style.backgroundColor="rgb("+r+","+g+","+b+")"; document.body.style.backgroundColor=`rgb(${r},${g},${b}) `; } red.oninput=renk; green.oninput=renk; blue.oninput=renk; </script> </body> </html> |
Yorum Yap