原生Javascript实现五角星评分

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

html部分

        

            
                

                    
                    
                
                
  
                 
                   
               
               

                    
                    
                
                

                    
                    
                
                

                    
                    
                
            
        
        

            0.0
    

CSS部分:

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;
},

运行结果: 

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