|
CS479/579 - Web Programming II
|
Displaying ./code/ES-examples/color.html
<!DOCTYPE html>
<html>
<head>
<title> Color selector </title>
<meta charset='utf-8'>
<style>
#color {
background-color: rgb(0,0,0);
color: white;
width: 200px; height: 200px;
text-align: center;
vertical-align: center;
font-size: 24pt;
}
table { border-collapse: collapse; }
#red, #green, #blue { width: 50px; font-size: 150%; text-align: right; }
</style>
<script>
var r = 0, g = 0, b = 0;
function red(val) { r = parseInt(val); update(); setval("red", r);}
function green(val) { g = parseInt(val); update(); setval("green", g);}
function blue(val) { b = parseInt(val); update(); setval("blue", b);}
function setval(id, value) {
document.getElementById(id).innerHTML = value;
}
function hex(v) {
var s = v.toString(16);
if (s.length == 1) s = "0" + s;
return s;
}
function update() {
var e = document.getElementById("color");
e.style.background = "rgb(" + r +"," + g + "," + b + ")";
e.innerHTML = "0x" + hex(r) + hex(g) + hex(b);
}
function reset() {
var inputs = document.getElementsByTagName("input");
if (inputs == undefined) return;
for(var i=0; i < inputs.length; i++) {
inputs[i].value = 0;
}
}
</script>
</head>
<body onload='reset();'>
<table border=1>
<tr><td colspan=3 id='color'>0x000000
<tr><td> Red <td><input id='rr' type='range' min=0 max=255 value=0 oninput='red(this.value);'> <td id='red'>0
<tr><td> Blue <td><input type='range' min=0 max=255 value=0 oninput='green(this.value);'> <td id='green'>0
<tr><td> Green <td><input type='range' min=0 max=255 value=0 oninput='blue(this.value);'> <td id='blue'>0
</table>
</body>
</html>
|