纯js+html+css实现星星评分（半星 and 全星）

本文链接：https://blog.csdn.net/Miss_Yu1995/article/details/105693291

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #star_div {
    display: inline-block;
    font-size: 0px;
  }
  span {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
  }
  .full-star {
    background-image: url('./img/fullstar.png');
  }
  .empty-star {
    background-image: url('./img/emptystar.png');
  }
  .half-star {
    background-image: url('./img/halfstar.png');
  }
</style>

<body>
  <div id="star_div" style="margin: 100px 50px;">
    <span id="0" class="full-star"></span>
    <span id="1" class="full-star"></span>
    <span id="2" class="full-star"></span>
    <span id="3" class="full-star"></span>
    <span id="4" class="full-star"></span>
  </div>
</body>
<script type="text/javascript">
  let spans = document.getElementsByTagName("span");
  let choosedVal = 10; // 评分分数
  let starWidth = 30; // 星星宽度
  let _left = document.getElementById('star_div').getBoundingClientRect().left;
  let _top = document.getElementById('star_div').getBoundingClientRect().top;

  οnlοad = function () {
    document.getElementById("star_div").onmousemove = function (e) {
      if(e.target.tagName === 'SPAN') {
        let index = parseInt(e.target.id);
        let imgDynamicWidth = e.pageX - _left - index * starWidth;
        if (imgDynamicWidth < starWidth / 2) {
          spans[index].className = 'half-star'
        } else {
          spans[index].className = 'full-star'
        }
        for (let j = index + 1; j < 5; j++) {
          spans[j].className = 'empty-star'
        }
        for (let k = 0; k < index; k++) {
          spans[k].className = 'full-star'
        }
      }
    };

    document.getElementById("star_div").onclick = function (e) {
      if(e.target.tagName === 'SPAN') {
        let index = parseInt(e.target.id);
        choosedVal = index * 2;
        let imgDynamicWidth = e.pageX - _left - index * starWidth;
        if (imgDynamicWidth < starWidth / 2) {
          choosedVal += 1
        } else {
          choosedVal += 2
        }
      }
    };

    //载入鼠标离开div事件
    document.getElementById("star_div").onmouseleave = function () {
      let index = parseInt(choosedVal / 2);

      for (let j = index; j < 5; j++) {
        spans[j].className = 'empty-star'
      }
      for (let k = 0; k < index; k++) {
        spans[k].className = 'full-star'
      }
      if(index * 2 !== choosedVal) {
        spans[index].className = 'half-star'
      }
    };
  }();
</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>
</head>
<style>
  #star_div {
    display: inline-block;
    font-size: 0px;
  }
  span {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
  }
  .full-star {
    background-image: url('./img/fullstar.png');
  }
  .empty-star {
    background-image: url('./img/emptystar.png');
  }
</style>

<body>
  <div id="star_div" style="margin: 100px 50px;">
    <span id="0" class="full-star"></span>
    <span id="1" class="full-star"></span>
    <span id="2" class="full-star"></span>
    <span id="3" class="full-star"></span>
    <span id="4" class="full-star"></span>
  </div>
</body>
<script type="text/javascript">
  let spans = document.getElementsByTagName("span");
  let choosedVal = 5; // 评分分数
  let starWidth = 30; // 星星宽度
  let _left = document.getElementById('star_div').getBoundingClientRect().left;
  let _top = document.getElementById('star_div').getBoundingClientRect().top;

  οnlοad = function () {
    document.getElementById("star_div").onmousemove = function (e) {
        if (e.target.tagName === 'SPAN') {
          let index = parseInt(e.target.id);
          spans[index].className = 'full-star'

          for (let j = index + 1; j < 5; j++) {
            spans[j].className = 'empty-star'
          }
          for (let k = 0; k < index; k++) {
            spans[k].className = 'full-star'
          }
        }
    };

    document.getElementById("star_div").onclick = function (e) {
        if (e.target.tagName === 'SPAN') {
          let index = parseInt(e.target.id);
          choosedVal = index = index + 1;
        }
    };

    //载入鼠标离开div事件
    document.getElementById("star_div").onmouseleave = function () {
        let index = choosedVal - 1;

        for (let j = index; j < 5; j++) {
          spans[j].className = 'empty-star'
        }
        for (let k = 0; k <= index; k++) {
          spans[k].className = 'full-star'
        }
    };
  }();
</script>

</html>

rate为分数
“★★★★★☆☆☆☆☆”.slice(5 - rate, 10 - rate);
在这里插入图片描述