JavaScript实现星级评分

前端之家收集整理的这篇文章主要介绍了JavaScript实现星级评分前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家,也给大家做个参考。

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

以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

猜你在找的jQuery相关文章