css.exe:星星评分

实现一个星星评分功能，需要先有星星，然后当鼠标移动到那里时，点亮星星，以下是用css实现一个5角星

#aa {
  position: relative;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
#star-five:before {
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
#star-five:after {
  position: absolute;
  display: block;
  color: red;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

参考:https://blog.csdn.net/mossbaoo/article/details/83863971
然而此方法过于繁琐，为了便于开发，可用特殊符号
以下为星星评分

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" charset="utf-8">
    <style>
        *{
            margin:none;
            padding:none;
        }
.star::after{
display: block;clear:both;
}
ul li{
    list-style:none;float:left;font-size:50px;color:gray;cursor:pointer;
}

    </style>
    </head>
    <body>
        <ul class="star">
            <li>&#9733</li>
            <li>&#9733</li>
            <li>&#9733</li>
            <li>&#9733</li>
            <li>&#9733</li>
        </ul>
    </body>
    <script type="text/javascript">
  window.onload=function()
  {
      var point=document.getElementsByTagName("li");
      var isclick=false;
      for(var i=0;i<point.length;i++){

          point[i].onclick=function(){
              if(!isclick){
              var previous=this.previousElementSibling;
              this.style.color="blue";
              while(previous){
                previous.style.color="blue";
                  previous=previous.previousElementSibling;
                  
              }
              isclick=true;
              
              }
          };
          point[i].onmouseover=function(){
            if(!isclick){
            var previous=this.previousElementSibling;
            this.style.color="green";
              while(previous)
              {
                  previous.style.color="green";
                  previous=previous.previousElementSibling;
                  }
            }
          };
          point[i].onmouseout=function()
          {
              if(!isclick){
            var previous=this.previousElementSibling;
              while(previous)
              {
                  this.style.color="gray";
                  previous=previous.previousElementSibling;
              }
              }
          };
          
        }
      
  }
    </script>
</html>

猜你喜欢