JavaScript练习——根据用户输入的个数，页面可以渲染对应王者荣耀英雄的个数

落凡尘༣

已于 2023-12-03 16:28:05 修改

阅读量1k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 前端 css

于 2023-11-12 19:04:51 首次发布

本文链接：https://blog.csdn.net/m0_65290003/article/details/134363778

本文介绍了如何使用JavaScript根据用户输入的个数动态渲染王者荣耀英雄图片，通过数组和循环创建列表项，同时提到避免使用`document.write`的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript练习——根据用户输入的个数，页面可以渲染对应王者荣耀英雄的个数

一、效果展示

在这里插入图片描述

二、思路分析

1、由于需要渲染的图片比较多,可以将图片的地址放在数组中通过遍历来实现。
2、图片名称是按顺序排列的,因此可以通过循环的方式重复这一操作

三、实现步骤

1、提示用户输入一个数字，该数字表示所需展示的英雄数量。

let num = +prompt("请输入英雄的个数(1~20)：");

2、循环遍历该数字(即次数)，每次都创建一个新的列表项（li元素），其中包含一张图片。图片的来源即相对路径: "./image/${ i + 1 }.jpg。利用如下的代码动态生成列表项:

document.write(`<div class="box">`);
        for (let i = 0; i < num; i++) {
          document.write(
            `<li>
      <img src="./image/${i + 1}.jpg" />
    </li>`
          );
        }
        document.write(`</div>`);

3、所有生成的列表项都被包含在一个box的div元素中。
4、根据自己的喜好设置英雄图片的样式

<style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        display: flex;
        flex-wrap: wrap;
        width: 600px;
        margin: 20px auto;
      }
      .box li {
        list-style: none;
        width: 100px;
        height: 100px;
        margin: 0 20px 20px 0;
      }
      .box li img {
        width: 100%;
        height: 100%;
        border: 3px solid rgb(39, 202, 213);
        border-radius: 10px 0px 10px 0px;
      }
    </style>

四、注意事项

在实践中我们通常不推荐使用document.write来添加或修改HTML文档的内容，如果是在文档加载完成之后执行，它可能会覆盖整个文档；如果是在文档加载完成之前执行，在文档加载过程中改变内容。
如果想在JavaScript种动态添加一个div元素,可以使用如下代码:

let divELe = document.createElement('div名称');  
document.body.appendChild(divELe);  
divELe.innerHTML = '<p>这是新div的内容</p>';

如果已经有一个div元素，并且想关闭这个div元素，可以使用:

let divELe = document.getElementById('div名称');  
div.innerHTML += '<p>这是新内容</p>'; // 添加新的内容到div