利用js,跟据用户输入的个数,页面可以渲染对应王者荣耀英雄的个数,其中一行最多五个英雄,可以多行
时间: 2024-09-29 18:08:20 浏览: 36
在JavaScript中,你可以利用数组和循环结构来实现这个功能。首先,假设你有一个包含所有王者荣耀英雄名称的数组。以下是步骤:
1. 创建一个HTML模板,例如,一个`<div>`元素用来显示每个英雄,它会被重复渲染。
```html
<div id="hero-container">
</div>
```
2. JavaScript部分,获取用户输入的英雄数量,并计算需要多少行:
```javascript
const heroNames = ['...']; // 王者荣耀所有英雄名数组
let userInput = parseInt(prompt('请输入英雄数量')); // 用户输入的个数
// 计算行数,确保不超过5个英雄每行
const rows = Math.ceil(userInput / 5);
```
3. 使用`map()`函数根据用户输入的数量和每行的最大英雄数,动态创建DOM元素并添加到页面上:
```javascript
for (let i = 0; i < rows; i++) {
const divRow = document.createElement('div');
divRow.id = `row${i}`;
for (let j = 0; j < Math.min(5, userInput - (i * 5)); j++) {
const heroDiv = document.createElement('div');
const heroName = heroNames[Math.floor(Math.random() * heroNames.length)]; // 随机选取一个英雄名
heroDiv.textContent = heroName;
divRow.appendChild(heroDiv);
}
document.getElementById('hero-container').appendChild(divRow);
}
```
4. 这段代码会在用户输入的英雄数量范围内,按照每行五个英雄的规则展示英雄。如果英雄数量不是5的倍数,最后一行会少于5个英雄。
阅读全文