首页利用循环语句在网页中打印星号组成实心菱形

利用循环语句在网页中打印星号组成实心菱形

时间: 2024-10-13 15:13:50 浏览: 49

利用循环语句在网页中打印星号组成实心菱形，通常我们会使用HTML结构结合CSS样式以及JavaScript来实现动态效果。这里是一个简单的JavaScript示例： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .diamond { position: relative; width: 60px; height: 40px; margin-bottom: 5px; } .diamond:before, .diamond:after { content: ""; position: absolute; border-style: solid; } .diamond:before { top: -10px; left: 10px; width: 0; height: 0; border-width: 10px 0 10px 10px; } .diamond:after { bottom: -10px; left: 10px; width: 0; height: 0; border-width: 0 10px 10px 10px; } .diamond span { display: inline-block; position: absolute; text-align: center; left: 20px; /* 调整这个值可以改变菱形中心位置 */ line-height: 20px; font-size: 18px; } </style> </head> <body> <div class="diamond" onclick="printDiamond(5)">5</div> <script> function printDiamond(n) { var diamond = document.querySelector('.diamond'); var content = ''; for (var i = 1; i <= n * 2 - 1; i++) { if (i % 2 == 1) { // 上下两条边 content += '*'; } else { // 中间的星号 content += Array(i).join('* '); } } diamond.textContent = content; } </script> </body> </html> ``` 在这个例子中，点击"5"所在的菱形区域会调用`printDiamond(5)`函数，根据输入的数字调整菱形的大小。每个菱形由两个三角形合并而成，通过JavaScript计算出每一行应该有多少个星号，并更新DOM元素的内容。

阅读全文