css+html+js实现五角星评分

本文实例为大家分享了css+html+js实现五角星评分的具体代码，供大家参考，具体内容如下效果图：css：style.evaluation{text-ali...

本文实例为大家分享了css+html+js实现五角星评分的具体代码，供大家参考，具体内容如下

效果图：

css：

<style>
    .evaLuation {
      text-align: center;
    }

    .title_15mhc {
      font-size: 26px;
      color: #252a30;
    }

    .stars {
      margin: auto;
      width: 54%;
    }

    .star {
      font-size: 30px;
      color: #FF8000;
      margin-right: 5px;
      -webkit-transition: all .3s;
      cursor: pointer;
    }

    .hs {
      color: #ccc;
    }
</style>

html： 

<div class="evaluation">
    <div class="title_15mhc" id="myd_box">
      非常满意
    </div>
    <div style=" width:100%;text-align:center;">
      <div class="stars">
        <swww.cppcns.compan data-value="1" class="star">&#9733;</span>
        <span data-value="2" class="star">&#9733;</span>
        <span data-value="3" class="star">&#9733;</span>
        <span data-value="4" class="star">&#9733;</span>
        <span data-value="5" class="star">&#9733;</span>
      </div>
    </div>
  </div>

js：

<script type="text/Javascript" src="/jquery-1.9.1.min.js"></scripjst>
  <script>
    $(function () {
      var isclick = false;
      $(".stars").hover(function () {
      }, function () {
        if (isclick) {
          var level = $("#Level").val();
          if (level > 0) {
            $(".stars span").eq(level - 1).nextAll().addClass('hs');
          }
        }
      });

      $(".stars span").hover(function () {
        if (isclick) {
          $(this).removeClass('hs');
        }
        $(this).nextAll().addClass('hs');
      }, function () {
        if (!isclick) {
          $(this).removeClass('hs');
          $(this).prevAll().removeClass('hs');
          $(this).nextAll().removeClass('hs');
        }

      });

      $(".stars span").click(function () {
        $(this).removeClass('hs');
        $(this).prevAll().removeClass('hs');
        var value = $(this).data("value");
        $("#Level").val(value);
        switch (value) {
          case 1:
            $("#myd_box").html("非常不满意");
            break;
          case 2:
            $("#myd_box").html("不满意");
            break;
          case 3:
            $("#myd_box").html("基本满意");
            break;
          case 4:
            $("#myd_box").html("满意");
            break;
          default:
            $("#myd_box").html("非常满意");
            break;
        }
        isclick = true;
      });
    });
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。