HTML_习题_利用for循环生成点阵（圆）

微__凉

于 2021-12-15 08:47:39 发布

阅读量378

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/Qian280101/article/details/121944246

版权

预期效果
在这里插入图片描述

<html>

<head>
	<meta charset="utf-8">

	<style>
		.container {
			position: absolute;
		}
	</style>
	<title>点阵</title>



</head>

<body>
	<div class="container">//给一类div起名为container
	</div>

	<script>
		let div = document.querySelector(".container");//选择容器元素
		let le = 50;
		let to = 50;
        
		for (let j = 1; j <= 6; j++) {
			for (let i = 1; i <= 6; i++) {
				let d1 = document.createElement("div");//创建d1为div中的一个元素
				d1.style.height = "25px";//大小
				d1.style.width = "25px";//大小
				d1.style.borderRadius = "50%";//形状为圆形
				d1.style.backgroundColor ="aqua";//颜色
				d1.style.position = "absolute";
				le = le + 30;
				d1.style.left = le;
				div.appendChild(d1);
				d1.style.top = to;
				div.appendChild(d1);//放入容器
			}
			le = 50;
			to = to + 30;
		}
	</script>


</body>

<html>

微__凉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML_习题_利用for循环生成点阵（圆）

预期效果<html><head> <meta charset="utf-8"> <style> .container { position: absolute; } </style> <title>点阵</title></head><body> <div class="container">//给一类div起名为container </
复制链接

扫一扫