首页用hbuilder编写程序，输出i行倒三角小星星

用hbuilder编写程序，输出i行倒三角小星星

时间: 2024-12-13 17:22:52 浏览: 2

在HBuilder（一款常用的Android和Web应用开发工具）中编写程序，你可以使用JavaScript或HTML/CSS来创建动态的倒三角小星星效果。这里提供一个简单的HTML/CSS示例： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .triangle { position: relative; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid white; margin-top: -50px; /* 控制倒三角的位置 */ } .triangle:before { content: ""; position: absolute; top: calc(100% + 50px); left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid white; } .stars { position: relative; font-size: 0; } .stars span { display: inline-block; font-size: 10px; background-color: white; width: 6px; height: 6px; border-radius: 50%; margin: 0 2px; } </style> </head> <body> <div class="triangle stars">  <span></span><span></span><span></span>...<span></span> </div> <script> var numStarsPerRow = i; // 假设i是你想要的行数 var starContainer = document.querySelector('.stars'); for (var j = 1; j <= numStarsPerRow; j++) { var starRow = document.createElement('span'); for (var k = 0; k <= j; k++) { var star = document.createElement('span'); starContainer.appendChild(star); } } </script> </body> </html> ``` 在这个例子中，`i`应该替换为你需要的行数。每次循环会增加一行星星。将这段代码保存为.html文件并在浏览器中打开，即可看到倒三角形的小星星。

阅读全文