JavaScript Assignment
RGB Background Color (RGB)
| Red : | 0 | |
| Green : | 0 | |
| Blue : | 0 |
Source Code
<html>
<head>
<style>
.box
{
width:240px;
height:150px;
padding:20px;
background:skyblue;
margin:auto;
margin-top:50px;
border-radius:20px;
}
</style>
<script>
function set_background()
{
var r=document.getElementById("r").value;
document.getElementById("s1").innerHTML=r;
var g=document.getElementById("g").value;
document.getElementById("s2").innerHTML=g;
var b=document.getElementById("b").value;
document.getElementById("s3").innerHTML=b;
document.getElementById("bg").style.background="rgb("+r+","+g+","+b+")";
}
</script>
</head>
<body >
<div class="box" id="bg">
<p align="center"><b>Background Function (RGB)</b></p>
<table width="100%">
<tr>
<td>Red : </td>
<td><input id="r" name="r" type="range" min=0 max=255 value="0" onchange="set_background()"/></td>
<td><span id="s1">0</span></td>
</tr>
<tr>
<td>Green : </td>
<td><input id="g" name="g" type="range" min=0 max=255 value="0" onchange="set_background()"/></td>
<td><span id="s2">0</span></td>
</tr>
<tr>
<td>Blue : </td>
<td><input id="b" name="b" type="range" min=0 max=255 value="0" onchange="set_background()"/></td>
<td><span id="s3">0</span></td>
</tr>
</table>
</div>
</body>
</html>
