星星评分

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    ol,
    li {
      list-style-type: none;
    }

    div.box {
      margin: 50px auto;
      width: 750px;
      display: flex;
      align-items: center;
      /* justify-content: space-evenly; */
    }

    .box ul {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      width: 120px;
      margin: 0 10px;
    }

    .box ul li {
      width: 20px;
      height: 20px;
      background: url("./imgs/star.png") 0 0 no-repeat;
      cursor: pointer;
      position: relative;
    }

    .box>p #score{
      color: red;
      font-weight: 900;
    }

    .box ul div {
      box-sizing: border-box;
      width: 180px;
      height: 67px;
      background: url("./imgs/icon.gif") 0 0 no-repeat;
      position: absolute;
      top: 100%;
      left: -80px;
      display: none;
      padding: 10px 10px;
      font-size: 12px;
    }

    .box .show {
      display: block;

    }

    .box ul h3 {
      color: red;
      font-style: normal;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="box">
    <h3>点击星星就能打分</h3>
    <ul>
      <li>
        <div>
          <h3></h3>
          <p>

          </p>
        </div>
      </li>
      <li>
        <div>

        </div>
      </li>
      <li>
        <div>

        </div>
      </li>
      <li>
        <div>

        </div>
      </li>
      <li>
        <div>

        </div>
      </li>
    </ul>
    <p>
      <span id="score"></span>
      <span id="info"></span>
    </p>
  </div>
  <script>
    var box = document.getElementsByClassName('box')[0];
    var li = box.getElementsByTagName('li');
    var score = document.getElementById('score');
    var info = document.getElementById('info');

    var starArr = ['很不满意', '不满意', '一般', '满意', '非常满意'];
    var infoArr = ['差的太离谱，与卖家描述严重不符，非常不满', '部分破损,与卖家描述的不符合，不满意', '质量一般，没有买家描述那么好', '质量不错，与卖家描述基本一致，还是挺满意的',
      '质量非常好,与卖家描述完全一致,非常满意'
    ]

    var flag = true;

    for (var i = 0; i < li.length; i++) {
      li[i].index = i;
      li[i].onmouseover = function () {
        for (var j = 0; j <= this.index; j++) {
          li[j].style.backgroundPositionY = '-28px';
        }
        this.firstElementChild.className = 'show'
        this.firstElementChild.innerHTML = '<h3>' + (this.index + 1) + '分 ' + starArr[this.index] + '</h3><p>' +
          infoArr[this.index] + '</p>'
      }

      li[i].onmouseout = function () {
        if (flag) {
          for (var j = 0; j <= this.index; j++) {
            li[j].style.backgroundPositionY = '';
          }
          this.firstElementChild.className = ''
        }

      }




      li[i].onclick = function () {
        flag= false;

        //先清空所有的样式
        for (var i = 0; i < li.length; i++) {
          li[i].style.backgroundPositionY = '0px';
        }


        // 设置当前的样式
        for (var j = 0; j <= this.index; j++) {
          li[j].style.backgroundPositionY = '-28px';
        }
        this.firstElementChild.className = ''

        

        
        // 显示对应的评分

        score.innerHTML = (this.index + 1) + '分'
        info.innerHTML = '(' + infoArr[this.index] + ')'


      }
    }
  </script>

</body>

</html>
猜你喜欢
