随机更改颜色与还原颜色

最新推荐文章于 2023-03-20 17:30:47 发布

原创最新推荐文章于 2023-03-20 17:30:47 发布 · 901 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #随机 #改变颜色 #还原

阿哈哈哈大前端专栏收录该内容

66 篇文章

订阅专栏

单击“更换颜色”按钮，随机更换背景颜色；单击“还原颜色按钮”，还原为上一次的颜色。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>随机更改颜色及还原</title>
	<script type="text/javascript">
		var body,color;
		function $ (id) { return document.getElementById(id); }
		function randomInteger() {
			var int = Math.floor(Math.random()*256);        //随机产生0-255之间的整数
			return int;
		}
		function changeColor() {
			body = $("my");
			color = body.getAttribute("bgColor");
			var rc = randomInteger().toString(16);
			var gc = randomInteger().toString(16);
			var bc = randomInteger().toString(16);
			var color1 = "#" + rc + gc + bc;
			body.setAttribute("bgColor",color1);
		}
		function restoreColor() {
			body.setAttribute("bgColor",color);
		}
	</script>
	
</head>
<body id="my" bgcolor="#99cccc">
	<form method="post" action="" >
		<input type="button" value="更换颜色" onclick="changeColor()">
		<input type="button" value="还原颜色" onclick="restoreColor()">
	</form>
</body>
</html>