首页利用js,跟据用户输入的个数，页面可以渲染对应王者荣耀英雄的个数，其中一行最多五个英雄，可以多行

利用js,跟据用户输入的个数，页面可以渲染对应王者荣耀英雄的个数，其中一行最多五个英雄，可以多行

时间: 2024-09-29 10:08:20 浏览: 121

在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个英雄。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通全年可省5,000元立即开通