黑马程序员——JavaScript数组核心练习题

最新推荐文章于 2023-11-12 19:04:51 发布

江枫鱼愁

最新推荐文章于 2023-11-12 19:04:51 发布

阅读量1.1k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52467069/article/details/130304353

版权

该文章介绍了一个根据用户输入数量动态渲染王者荣耀英雄图片的网页示例。通过将图片地址存入数组并利用JavaScript的for循环进行渲染，结合CSS的弹性布局（flex-wrap）实现每行显示五张图片并自动换行，以及使用CSS选择器调整最后一列的间距。图片使用了圆角和边框效果。

摘要由CSDN通过智能技术生成

需求：

根据用户输入的个数，页面可以渲染对应王者荣耀永雄的个数。

效果如下：

思路分析：

渲染图片比较多，我们可以把图片地址放入数组中。
图片名称是有序号排列的，比如1.webp 2.webp，此处可以使用循环方式重复渲染图片。
渲染位置？可以考虑放到 box 盒子里写 script 即可。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组核心练习题</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      display: flex;
      flex-wrap: wrap;
      margin: 20px auto;
      width: 540px;
    }

    .box li {
      list-style: none;
    }

    .box>li {
      width: 100px;
      height: 100px;
      margin: 0 10px 10px 0;
    }

    .box li:nth-child(5n) {
      margin-right: 0;
    }

    .box li img {
      height: 100px;
      width: 100px;
      border: 2px solid #258DF2;
      border-radius: 10px 0 10px 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script>
    let num = +prompt("请输入要展示的图片数量(1-20)：")
    document.write(`<div class="box">`)
    for (let i = 0; i < num; i++) {
      document.write(
        `<li>
      <img src="../images/${i + 1}.webp" />
    </li>`
      )
    }
    document.write(`</div>`)
  </script>
</body>
</html>