方法一：
<script type="text/javascript">
window.onload = function(){
var r = document.getElementById("r");
var g = document.getElementById("g");
var b = document.getElementById("b");
var rval = 0;//存儲顔色的變量
var gval = 0;//存儲顔色的變量
var bval = 0;//存儲顔色的變量
r.onchange = function(){
rval = this.value;
document.body.style.backgroundColor = "rgb("+rval+","+gval+","+bval+")";
}
g.onchange = function(){
gval = this.value;
document.body.style.backgroundColor = "rgb("+rval+","+gval+","+bval+")";
}
b.onchange = function(){
bval = this.value;
document.body.style.backgroundColor = "rgb("+rval+","+gval+","+bval+")";
}
}
</script>
</head>
<body>
紅色：<input type="range" value="0" min="0" max="255" id="r" /><br />
綠色：<input type="range" value="0" min="0" max="255" id="g" /><br />
藍色：<input type="range" value="0" min="0" max="255" id="b" /><br />
</body>
方法二：
<script type="text/javascript">
window.onload = function(){
var rval = gval =bval = 0;//存儲顔色的變量
function $(id){
return document.getElementById(id);
}
function fn(obj){
$(obj).onchange = function(){
/*if(obj === "r"){
rval = this.value;
console.log(rval)
}else if(obj === "g"){
gval = this.value;
}else{
bval = this.value;
}*/
switch(obj){
case "r":
rval = this.value;
break;
case "g":
gval = this.value;
break;
case "b":
bval = this.value;
break;
}
document.body.style.backgroundColor = "rgb("+rval+","+gval+","+bval+")";
}
}
fn("r");
fn("g");
fn("b");
}
</script>
</head>
<body>
紅色：<input type="range" value="0" min="0" max="255" id="r" /><br />
綠色：<input type="range" value="0" min="0" max="255" id="g" /><br />
藍色：<input type="range" value="0" min="0" max="255" id="b" /><br />
</body>
![【案例練習】06—25個Web開發中的移動端響應式菜單練習案例[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)