首页在浏览器控制台编写10行20列的空心矩形程序

在浏览器控制台编写10行20列的空心矩形程序

时间: 2024-09-26 13:02:02 浏览: 31

在浏览器控制台中编写一个简单的空心矩形程序，我们可以利用HTML和CSS来快速创建，因为JavaScript控制台主要用于执行脚本，而不是直接展示复杂的图形。这里是一个示例： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .container { width: 500px; border: 2px solid black; /* 矩形边框 */ display: flex; flex-wrap: wrap; /* 使元素换行 */ } .cell { width: 20px; height: 10px; margin: 1px; border: none; } </style> </head> <body> <div class="container"> <div class="cell"></div>  </div> <script> for (var i = 0; i < 10; i++) { // 行数 for (var j = 0; j < 20; j++) { // 列数 var cell = document.createElement('div'); cell.classList.add('cell'); if ((i + j) % 2 !== 0) { // 控制空格和实心部分交替 document.querySelector('.container').appendChild(cell); } } } </script> </body> </html> ``` 上述代码会在浏览器控制台生成一个10行20列的空心矩形，每两个相邻的小方块会有一个空隙，形成空心效果。

阅读全文