JavaScript实现星级评分详解编程语言

window.onload = function(){ 
    var star = document.getElementById('star'); 
    var ul = star.getElementsByTagName('ul')[0]; 
    var li = star.getElementsByTagName('li'); 
    var span = star.getElementsByTagName('span')[1]; 
    var p = star.getElementsByTagName('p')[0]; 
    var evl = ["很不满意|差得太离谱,与卖家描述的严重不符,非常不满", 
                "不满意|部分有破损,与卖家描述的不符,不满意", 
                "一般|质量一般,没有卖家描述的那么好", 
                "满意|质量不错,与卖家描述的基本一致,还是挺满意的", 
                "非常满意|质量非常好,与卖家描述的完全一致,非常满意"]; 
    var iStar = iArg = 0; 
    for(i = 1;i <= li.length;i++){ 
        li[i-1].point = i; 
        li[i-1].onmouseover = function(){ 
            fnPoint(this.point); 
            p.style.left = ul.offsetLeft + this.point * this.offsetWidth - 104 + 'px'; 
            p.innerHTML = '<em><b>'+this.point+'分</b>'+ evl[this.point-1].match(/(.+)/|/)[1] + '</em>' + evl[this.point-1].match(//|(.+)/)[1]; 
            p.style.display = 'block'; 
        } 
          
        li[i-1].onclick = function(){ 
            iStar = this.point; 
            p.style.display = 'none'; 
            span.innerHTML = '<strong>'+this.point+'分'+'</strong>'+'('+evl[this.point-1].match(//|(.+)/)[1]+')'; 
              
        } 
          
        li[i-1].onmouseout = function(){ 
            fnPoint();             //可以传参数 
            p.style.display = 'none'; 
        } 
    } 
      
    function fnPoint(iArg){ 
        var score = iArg || iStar; 
        for(i =1;i <=li.length;i++){ 
            li[i-1].className = score < i?'':'on'; 
        } 
    } 
}

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/8874.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论