原生Javascript實現五角星評分

利用原生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) { //當index大於i*2的時候,就填充i個數量的滿格星星
                    items[i].style.background = "url() no-repeat";
                    items[i].style.backgroundSize = "100% 100%";
                   } else {
                   if (tem == -1) {
                     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;
            },

運行結果: