原生Javascript实现五角星评分

利用原生Javascript实现五角星评分,可以打半分.话不多说先上代码。html部分divclass=setStarRatedivclass=starsp...

利用原生Javascript实现五角星评分,可以打半分.话不多说先上代码。

html部分

<div class="setStarRate">
        <div class="star">
            <span id="star">
                <li>
                    <a href="javascript:void(0)" nclick="rateStar(1)"></a>
                    <a href="javascript:void(0)" nclick="rateStar(2)"></a>
                </li>
                <li>  
                 <a href="javascript:void(0)" nclick="rateStar(3)"></a>
                  <a href="javascript:void(0)" nclick="rateStar(4)"></a> 
               </li>
               <li>
                    <a href="javascript:void(0)" nclick="rateStar(5)"></a>
                    <a href="javascript:void(0)" nclick="rateStar(6)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)" nclick="rateStar(7)"></a>
                    <a href="javascript:void(0)" nclick="rateStar(8)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)" nclick="rateStar(9)"></a>
                    <a href="javascript:void(0)" nclick= "rateStar(10)"></a>
                </li>
            </span>
        </div>
        <div class="grade">
            <span id="getStarRate">0.0</span>
    </div>
</div>

css部分:

<style>
  .grade span {
    margin-left: 15px;
    line-height: 30px;
  }

  span {
    width: 50%;
    height: 70%;
    padding: 0;
    margin: 0 25%;
  }

  span li {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url("") no-repeat;//这里输入灰色状态星星的图片链接
  }

  span li a {
    height: 20px;
    width: 10px;
    display: inline-block;
    display: block;
    float: left;
  }
</style>

js部分

function rateStar(index) {
 var star = document.getElementById('star');
 var items = star.getElementsByTagName("li");
    index = parseInt(index) - 1; //因为一个星星由2个a标签组成的,所以减掉1
     var tem = -1;
    //遍历所有的li标签
     for (var i = 0; i < items.length; i++) {
       if (index > i * 2) { //当indjsex大于i*2的时候,就填充i个数量的满格星星
       items[i].style.background = "url() no-repeat";
      items[i].style.backgroundSize = "100% 100%";
      } else {
      if (tem == -1) {
    js      tem = i;
         }
         items[i].style.background = "url() no-repeat"; //填充灰色状态的星星
         items[i].style.backgroundSize = "100% 100%";
       }
     }
      //判断index是否等于偶数
     if (index == parseInt(tem) * 2) {
     //当前li元素的背景设置成半格星星状态
    items[tem].style.background = "url() no-repeat";
    items[tem].style.backgroundSize = "100% 100%";
   }
  document.getElementById('getStarRate').innerHTML = (parseInt(index) + 1) * 0.5;
},

运行结果: 

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