变色九宫格

雯靑爭

已于 2024-06-14 09:14:16 修改

阅读量61

点赞数

文章标签：前端 javascript 开发语言

于 2022-12-06 17:44:59 首次发布

本文链接：https://blog.csdn.net/weixin_52421124/article/details/128207362

版权

变色九宫格

<!doctype html>
<html>
<head>
<meta content="1" http-equiv="refresh"><!--content用来设置闪光时间，单位是秒。http-equiv="refresh"实现网页自动跳转-->
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body bgcolor="#000">
<script>
	function color_(){ //Math.floor(Math.random()*16777215）是在该整数范围内随机选择一个值，而Math.floor（）是执行向下舍入，即它总是将数值向下舍入为最接近的整数。最后执行.toString(16)将随机整数转化为16进制。
		return"#"+Math.floor(Math.random()*16777215).toString(16);//收集一个函数：获取颜色随机值。16777215为16进制的颜色ffffff转化为10进制的数字。 
	}
	document.write("<div style='width:156px;height:156px;margin:0 auto; background:#FBF7F7;padding:1px;'>");//设置背景边框大小，margin:0 auto：div在浏览器中布局居中，水平居中。设置颜色。padding：四周边距1像素（内边距）。
		for(i=1;i<10;i++){//for循环出现9个。
			document.write("<div style='width:50px;height:50px;margin:1px;background:"+color_()+";float:left;'>");//for循环中的9个方块进行设置边框大小，颜色，margin：外边距，float：浮动。
							document.write("</div>");//输出9个方块。

			}
				document.write("</div>");//输出背景边框。
</script>
<div>
	<div></div><!--div嵌套div实现九宫格样式-->
</div>
</body>
</html>