原生js星级评分

YAN_523

于 2021-06-22 19:59:06 发布

阅读量170

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/YAN_523/article/details/118115057

版权

该博客详细介绍了如何使用HTML、CSS和JavaScript实现一个星级评分系统。通过悬浮和点击事件，用户可以预览和选择评分，同时显示相应的评语。代码实现包括星星的选择状态切换、评分结果显示以及鼠标悬浮时的提示信息动态更新。

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

在这里插入图片描述

//代码块

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .main {
    padding: 50px;
    position: relative;
  }
  .star {
    display: inline-block;
    vertical-align: middle;
  }
  .star a {
    display: block;
    float: left;
    width: 24px;
    height: 24px;
    background: url(./star.png) no-repeat;
    background-size: 100%;
  }
  .result {
    position: absolute;
    left: 0;
    top: 80px;
  }
</style>   </head>   <body>
<div class="main">
  <span>星级评分`在这里插入代码片`：</span>
  <div class="star">
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
  </div>
  <!-- 评分的结果 -->
  <span class="score"></span>
  <!-- 评分的提示文本 -->
  <div class="result"></div>
</div>
<script>
  // 准备数据源
  let messages = [
    "很不满意|质量很差",
    "不满意|产品不是很灵活",
    "一般|还行，能用",
    "满意|质量不错，用了一个月就坏了",
    "很满意|质量非常好，与卖家描述一致",
  ];

  // 1. 获取星星对象，给每个星星对象绑定悬浮事件
  let allStar = document.querySelectorAll("a");
  let result = document.querySelector(".result");
  let scoreObj = document.querySelector(".score");

  // 记录最终得分
  let score = 0;

  for (let i = 0; i < allStar.length; i++) {
    // onmouseover/onmouseout: 支持冒泡。
    // onmouseenter/onmouseleave: 不支持冒泡。
    allStar[i].index = i;
    allStar[i].onmouseover = function () {
      // 方案一：这种方式，只是在操作当前这一个悬浮的星星，没有考虑前面的星星也要被选中。
      // this.style.backgroundPosition = "0 -35px";

      // 方案二：
      for (let j = 0; j < allStar.length; j++) {
        // 遍历每一个星星对象，只要这个星星对象的索引，小于等于 当前悬浮星星对象的索引，那么这些星星都要选中。
        if (allStar[j].index <= this.index) {
          // 选中
          allStar[j].style.backgroundPosition = "0 -35px";
        } else {
          // 不选中
          allStar[j].style.backgroundPosition = "0 0";
        }
      }
      // 给当前悬浮的星星设置提示评语
      let msg = messages[this.index];
      let msgArr = msg.split("|");
      result.innerHTML = `<strong>${this.index + 1}分 ${
        msgArr[0]
      }</strong><br />${msgArr[1]}`;
      // 评语的位置
      result.style.left = this.offsetLeft + "px";
    };

    allStar[i].onmouseout = function () {
      // this.style.backgroundPosition = "0 0";

      // 清空所有悬浮时，选中的星星。
      for (let i = 0; i < allStar.length; i++) {
        // 判断如果有得分，保留得分的星星不被清空。
        if (i < score) {
          // 点击了
          allStar[i].style.backgroundPosition = "0 -35px";
        } else {
          // 没有点击
          allStar[i].style.backgroundPosition = "0 0";
        }
      }

      // 清空评分提示文本
      result.innerHTML = "";
    };

    // 2. 最终点击星星，确定最终得分
    allStar[i].onclick = function () {
      // 记录得分
      score = this.index + 1;
      let msg = messages[this.index];
      msgArr = msg.split("|");
      // 将最终的得分结果显示出来
      scoreObj.innerHTML = `<strong>${score}分 ${msgArr[0]}</strong>  ${msgArr[1]}`;
      // 将提示评语，清空
      result.innerHTML = "";
    };
  }
</script>   </body> </html>