📄 ch14-196.html
字号:
<HTML>
<HEAD>
<TITLE>页面背景篇--手动变换背景色</TITLE>
</HEAD>
<BODY bgcolor="#fef4d2" >
<br><br>
<center>
<h2>页面背景篇--手动变换背景色</h2>
<hr width=300>
<br><br>
<!-- 案例代码1开始 -->
<script language=JavaScript>
var red=0;
var green=0;
var blue=0;
var index=0;
var convert = new Array()
var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
function AddColor(id,num){
if (id==0){if ((red+num)<=255) red+=num; display()}
else if (id==1) {if ((green+num)<=255) green+=num;display()}
else {if ((blue+num)<=255) blue+=num;display()}
}
function ReduceColor(id,num){
if (id==0){if ((red-num)>=0) red-=num;display()}
else if (id==1){if ((green-num)>=0)green-=num;display()}
else {if ((blue-num)>=0)blue-=num;display()}
}
function display(){
redx = convert[red]
greenx = convert[green]
bluex = convert[blue]
var rgb = "#"+redx+greenx+bluex;
document.bgColor =rgb;
}
for (x=0; x<16; x++){
for (y=0; y<16; y++){
convert[index]= hexbase[x] + hexbase[y];
index++;}
}
</script>
<!-- 案例代码1结束 -->
<!-- 案例代码2开始 -->
<form name="color">
<table>
<tr align="center">
<!-- [Step1]: 这里可以设置按钮的名称 -->
<td><input name="red-" type="button" value="-50" onClick="ReduceColor(0,50)"></td>
<td><input name="red-" type="button" value="-10" onClick="ReduceColor(0,10)"></td>
<td><input name="red-" type="button" value=" -1" onClick="ReduceColor(0,1)"></td>
<!-- [Step2]: 在此能够更改页面信息的颜色 -->
<!-- [Step3]: 这里可以设置页面信息的大小 -->
<!-- [Step4]: 在此能够修改页面显示的信息 -->
<td width="40"><font color="#FF0000" size=5><b>红</b></font></td>
<td><input name="red+" type="button" value=" +1" onClick="AddColor(0,1)"></td>
<td><input name="red+" type="button" value="+10" onClick="AddColor(0,10)"></td>
<td><input name="red+" type="button" value="+50" onClick="AddColor(0,50)"></td>
</tr>
<tr align="center">
<td><input name="green-" type="button" value="-50" onClick="ReduceColor(1,50)"></td>
<td><input name="green-" type="button" value="-10" onClick="ReduceColor(1,10)"></td>
<td><input name="green-" type="button" value=" -1" onClick="ReduceColor(1,1)"></td>
<td width="40"><font color="#008000" size=5><b>绿</b></font></td>
<td><input name="green+" type="button" value=" +1" onClick="AddColor(1,1)"></td>
<td><input name="green+" type="button" value="+10" onClick="AddColor(1,10)"></td>
<td><input name="green+" type="button" value="+50" onClick="AddColor(1,50)"></td>
</tr>
<tr align="center">
<td><input name="blue-" type="button" value="-50" onClick="ReduceColor(2,50)"></td>
<td><input name="blue-" type="button" value="-10" onClick="ReduceColor(2,10)"></td>
<td><input name="blue-" type="button" value=" -1" onClick="ReduceColor(2,1)"></td>
<td width="40"><font color="#0000FF" size=5><b>蓝</b></font></td>
<td><input name="blue+" type="button" value=" +1" onClick="AddColor(2,1)"></td>
<td><input name="blue+" type="button" value="+10" onClick="AddColor(2,10)"></td>
<td><input name="blue+" type="button" value="+50" onClick="AddColor(2,50)"></td>
</tr>
</table>
</form>
<!-- 案例代码2结束 -->
</BODY>
</HTML>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -