|
CS479/579 - Web Programming II
|
Displaying ./code/ES/color.html
<!-- A comment -->
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset='utf-8'>
<style>
#color {
width: 200px; background: black;
text-shadow: 2px 2px white;
text-align: center;
}
</style>
<script>
// r,g, and b represent the red/green/blue color components:
var r=0, g=0, b=0;
// converts a 0-255 value to a zero padded hex string:
function hex(v) {
var s = v.toString(16);
if (s.length == 1) return '0'+s;
return s;
}
// Called when one of the sliders is modified:
function updatecolor() {
// Gets the td element with the ID == 'color':
var cb = document.getElementById("color");
// Modify the td background attribute color via the CSS rgb() method:
cb.style.background =
"rgb(" + r + "," + g + "," + b + ")";
// Display the RGB hex value inside of the td:
cb.innerHTML = "#" + hex(r) + hex(g) + hex(b);
}
// The oninput event handlers for each slider:
function red(v) { r = parseInt(v); updatecolor(); }
function blue(v) { b = parseInt(v); updatecolor(); }
function green(v) { g = parseInt(v); updatecolor(); }
// Reset everything on page load:
function reset() {
r = g = b = 0;
document.getElementById("r").value = 0;
document.getElementById("g").value = 0;
document.getElementById("b").value = 0;
updatecolor();
}
</script>
</head>
<!--
The 'onload' event handler is called with the document (or at least the body
element) is finished loading.
-->
<body onload='reset();'>
<table border=1>
<tr>
<!--
'oninput' event handler is called every time the slider is moved.
'this.value' represents the value attribute of the input element (i.e. 'this').
Note: that the value attribute is always a string, not a number, so should be
converted to a number using parseInt().
-->
<td style='background:red;'><input id='r' type='range' value=0 min=0 max=255 oninput='red(this.value);'>
<!--
We modify the background attribute of this td element and modify the
text (innerHTML) to display the color:
-->
<td rowspan=3 id='color'>
<tr>
<td style='background:green;'> <input id='g' type='range' value=0 min=0 max=255 oninput='green(this.value);'>
<tr>
<td style='background:blue;'> <input id='b' type='range' value=0 min=0 max=255 oninput='blue(this.value);'>
</table>
</body>
</html>
|