前端——JS之随机更改背景颜色

难得听课(小声bb)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>随机更改背景颜色</title>
	<script type="text/javascript">
		var table,color;
		function $(id){return document.getElementById(id);}
		function randomInt(){
			var rancor=Math.floor(Math.random()*256);
			return rancor;
		}
		function ChangeColor(){
			table=$("FirstTab");
			color=table.getAttribute("bgcolor");//保存原始值
			var r=randomInt().toString(16);///转化为16进制
			var g=randomInt().toString(16);
			var b=randomInt().toString(16);
			var rescolor="#"+r+g+b;
			table.setAttribute("bgcolor",rescolor);///把后者的值赋值给前者
		}
		function ResetColor(){
			///color="#179BD6";
			table.setAttribute("bgcolor",color);
		}
	</script>
</head>

<body>
	<form method="post" >
		<table align="center" border="1" bgcolor="#179BD6" width="500px" id="FirstTab">
			<tr>
				<caption>学生花名册</caption>
				<td>序号</td>
				<td>姓名</td>
				<td>学号</td>
				<td>专业</td>
			</tr>
			<tr>
				<td>1</td>
				<td>Cutele</td>
				<td>261</td>
				<td>软件工程</td>
			</tr>
			<tr>
				<td>2</td>
				<td>小乐乐</td>
				<td>20192203262</td>
				<td>网络工程</td>
			</tr>
			<tr>
				<td colspan="4">
					<input type="button" value="change color" onClick="ChangeColor()">
					<input type="button" value="reset color" onClick="ResetColor()">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

原文地址:https://www.cnblogs.com/OvOq/p/14853133.html