用两个代表性案例深刻掌握JS-CSDN博客

本文链接：https://blog.csdn.net/m0_65517946/article/details/131603639

文章展示了两个HTML/CSS/JS实现的示例：一是使用布局和事件处理实现三国英雄图片的移动，二是创建了一个未来之星投票系统，动态更新投票排名。这两个例子旨在帮助读者通过实践提升JavaScript的理解和应用能力。

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

一、三国英雄归位

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 布局方式：
    1.操控单个元素：子元素采用绝对定位，父元素采用相对定位。
      所有的子元素，left和top都是相对于父元素的左上顶点，
      因此每个子元素的left和top的初始值都不一样。
    2.操控批量元素：父元素采用流式布局flex，子元素采用相对定位。
      每个子元素都是相对于自身的初始位置，每个子元素的left和top初始值都是0 */
    .f1,
    .f2 {
      /* 流式布局，批量操作 */
      display: flex;
      /* 每个子元素均匀分布 */
      justify-content: space-around;
    }

    .f1>img {
      width: 200px;
      height: 300px;
      position: relative;
      left: 0;
      top: 0;
    }

    .f2 {
      margin-top: 150px;
    }

    .f2>div {
      width: 200px;
      height: 300px;
      border: 1px solid plum;
      text-align: center;
      /* 行高与元素高度一致，则垂直居中 */
      line-height: 300px;
    }
  </style>
</head>

<body>
  <div class="f1">
    <img src="img/曹操.jpg" alt="" onclick="move1(this,0)">
    <img src="img/貂蝉.jpg" alt="" onclick="move1(this,1)">
    <img src="img/关羽.jpg" alt="" onclick="move1(this,2)">
    <img src="img/刘备.jpg" alt="" onclick="move1(this,3)">
    <img src="img/刘协.jpg" alt="" onclick="move1(this,4)">
    <img src="img/孙权.jpg" alt="" onclick="move1(this,5)">
  </div>
  <div class="f2">
    <div>刘协</div>
    <div>曹操</div>
    <div>刘备</div>
    <div>孙权</div>
    <div>关羽</div>
    <div>貂蝉</div>
  </div>
</body>
<script>
  //定义一个坐标对象，记录当前操作元素的位置
  let pos = { x: 0, y: 0 }
  //定义一个数组，存放6个对象，独立记录每个对象的运动坐标
  let arr = [{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]
  function move1(img, i) {
    //pos表示当前正在操作的对象
    pos = arr[i]
    document.onkeydown = function (e) {
      switch (e.keyCode) {
        case 37:
          pos.x -= 5
          img.style.left = pos.x + 'px'
          break
        case 39:
          pos.x += 5
          img.style.left = pos.x + 'px'
          break
        case 38:
          pos.y -= 5
          img.style.top = pos.y + 'px'
          break
        case 40:
          pos.y += 5
          img.style.top = pos.y + 'px'
          break
      }
    }
  }

</script>

</html>

静态效果如下：

二、未来之星投票

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .top {
      display: flex;
      justify-content: center;
    }

    .top>div {
      margin-left: 30px;
      text-align: center;
    }

    .top>div>span {
      color: turquoise;
      font-size: large;
    }

    /* 第一个和第三个元素向下移动 */
    .top>div:nth-child(1),
    .top>div:nth-child(3) {
      margin-top: 30px;
    }

    img {
      width: 150px;
      height: 200px;
      border-radius: 10px;
    }

    img:hover {
      box-shadow: 5px 5px 5px pink;
      transform: translate(5px 5px);
    }

    /* 主体部分的布局 */
    .main {
      display: flex;
      justify-content: space-around;
      /* 自动换行 */
      flex-wrap: wrap;
    }

    .main>div {
      text-align: center;
      margin-left: 30px;
      margin-top: 20px;
    }

    .main button {
      width: 90px;
      height: 40px;
      border-radius: 10px;
      border: none;
      background-color: papayawhip;
      font-size: large;
      cursor: pointer;
      color: plum;
    }

    button:hover {
      box-shadow: 0 8px 5px salmon;
    }

    button:active {
      transform: translateY(5px);
      box-shadow: 0 3px 5px salmon;
    }
  </style>
</head>

<body>
  <h1 style="text-align: center;color: fuchsia;">未来之星前三甲</h1>
  <div class="top" id="top">
    <div>
      <img src="imgs/a.jpg" alt=""><br>
      <span>榜眼</span><br>
      请投票
    </div>
    <div>
      <img src="imgs/b.jpg" alt=""><br>
      <span>状元</span><br>
      请投票
    </div>
    <div>
      <img src="imgs/c.jpg" alt=""><br>
      <span>探花</span><br>
      请投票
    </div>
  </div>
  <hr>
  <div class="main" id="main">
    <div>
      <img src="imgs/a.jpg" alt=""><br>
      <span>a--0</span><br><br>
      <button>投票</button>
    </div>
  </div>
</body>
<script>
  let beauty = [
    { name: 'a.jpg', num: 0 }, { name: 'b.jpg', num: 0 }, { name: 'c.jpg', num: 0 },
    { name: 'd.jpg', num: 0 }, { name: 'e.jpg', num: 0 }, { name: 'f.jpg', num: 0 },
    { name: 'g.jpg', num: 0 }, { name: 'h.jpg', num: 0 }, { name: 'i.jpg', num: 0 },
    { name: 'j.jpg', num: 0 }, { name: 'k.jpg', num: 0 }, { name: 'l.jpg', num: 0 },
  ]
  //根据数组中的数据，自动生成图片到页面
  let main = document.getElementById('main')
  function flushImg() {
    let s = ''
    beauty.forEach((e, i) => {
      s +=
        `<div>
        <img src="./imgs/${e.name}" alt=""><br>
        <span>${e.name.slice(0, e.name.indexOf('.'))}--${e.num}</span><br><br>
        <button onclick="vote(${i})">投票</button>
       </div>
      `
    })
    main.innerHTML = s
  }
  //调用flushImg函数
  flushImg()
  //投票函数
  function vote(i) {
    beauty[i].num++
    //刷新主体（数组中的数据）
    flushImg()
    //更新前三甲
    updateTop3()
  }
  let tops = document.getElementById('top')
  //更新前三甲
  function updateTop3() {
    //不能对原数组排序，把原数组拷贝一份用来排序
    let beauty2 = [...beauty]
    beauty2 = beauty2.sort((e1, e2) => {
      //倒序
      return e2.num - e1.num
    })
    //取数组前三个对象
    beauty2 = beauty2.slice(0, 3)
    tops.innerHTML =
      `<div>
      <img src="imgs/${beauty2[1].name}" alt=""><br>
      <span>榜眼</span><br>
      ${beauty2[1].name.slice(0, beauty2[1].name.indexOf('.'))}--${beauty2[1].num}
    </div>
    <div>
      <img src="imgs/${beauty2[0].name}" alt=""><br>
      <span>状元</span><br>
      ${beauty2[0].name.slice(0, beauty2[1].name.indexOf('.'))}--${beauty2[0].num}
    </div>
    <div>
      <img src="imgs/${beauty2[2].name}" alt=""><br>
      <span>探花</span><br>
      ${beauty2[2].name.slice(0, beauty2[1].name.indexOf('.'))}--${beauty2[2].num}
    </div>
    `
  }
</script>

</html>

静态效果如下：