web利用循环语句形成星型图案
时间: 2024-10-30 08:04:03 浏览: 7
asp循环语句总结
Web中创建星形图案通常会使用HTML、CSS和JavaScript,特别是当涉及到动态生成内容时。这里有一个简单的例子,使用JavaScript通过循环语句来形成星型:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.star {
font-size: 0;
}
.row:before, .row:after {
content: '';
display: table;
}
.row:after {
clear: both;
}
.star::before, .star::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.star::before {
content: '\2605'; /* 星号字符 */
left: -5px; /* 调整间距 */
}
.star::after {
content: '\2606'; /* 下一颗星 */
left: 0;
}
</style>
</head>
<body>
<div id="starPattern" class="row"></div>
<script>
function drawStars(numStars) {
var container = document.getElementById('starPattern');
for (var i = 0; i <= numStars; i++) {
var starRow = document.createElement('div');
starRow.className = 'star';
container.appendChild(starRow);
for (var j = 0; j <= i; j++) {
if (j % 2 === 0) { // 只画奇数位置的星星
var star = document.createElement('span');
star.innerText = '\u2605'; // 星号
starRow.appendChild(star);
}
}
}
}
// 示例,绘制7颗星
drawStars(7);
</script>
</body>
</html>
```
在这个示例中,我们首先创建了一个容器`<div>`,然后使用嵌套的for循环来生成星形。外部循环控制行数,内部循环控制每行的星星数量。注意,我们只给奇数位置的元素添加了星号,使得星形呈现出来。
阅读全文