前端新手项目练习之星级评分

前端新手项目练习之星级评分

前端新手记录自己在网络上找到的前端练习项目。

项目简介

一个简单的星评分系统，鼠标移上去显示评分和描述，点击之后评分和描述直接显示在右侧。

星级评分系统.gif

html部分

html部分主体是一个列表，代表五颗星星，感觉列表在我的项目里出现有些频繁。。。

    
        
        
        
        
    
    
        

            点击星星就能打分
            

                
1
                
2
                
3
                
4
                
5
            
            
            

        
    

CSS部分

比较值得学习的地方是实现星星的部分，使用背景来显示星星，并将文字无限左移来进行隐藏。

body,div,ul,li,p {
    margin: 0;
    padding: 0;
}
body {
    color: #666;
    font: 12px/1.5 Arial;
}
ul {
    list-style-type: none;
}
#star {
    position: relative;
    width: 600px;
    margin: 10px auto;
}
#star ul, #star span {
    float:left;
    display: inline;
    height: 19px;
    line-height:19px;
}
#star ul {
    margin: 0 10px;
}
#star li {
    float: left;
    width: 24px;
    cursor: pointer;
    text-indent: -9999px; /* 起到隐藏文字的效果 */
    background: url(img/star.png) no-repeat;
}
#star strong {
    color: #f60;
    padding-left: 10px;
}
#star li.on {
    background-position:0 -28px;
}
#star p {
    position: absolute;
    top: 20px;
    width: 159px;
    height: 60px;
    display: none;
    background: url(img/icon.gif) no-repeat;
    padding: 7px 10px 0;
}
#star p em {
    color: #f60;
    display: block;
    font-size: normal;
}

font属性

font可以在一个声明中声明所有字体属性。另外，当设置font-size的时候，可通过斜杠来设置行高（inline-height）例如12px/1.5代表字体大小12px,行高为12 * 1.5 = 18px。

text-indent属性

代表文本块中首行文本的缩进，如果设置为-9999px,可以实现文字的隐藏。

background属性

简写属性在一个声明中设置所有的背景属性，本项目用来设置background-image来设置背景图像，元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。background-repeat决定图像是否重复。

javascript部分

window.onload = function() {
    var oStar = document.getElementById("star");
    var aLi = oStar.getElementsByTagName("li");
    var oUl = oStar.getElementsByTagName("ul")[0];
    var oSpan = oStar.getElementsByTagName("span")[1];
    var oP = oStar.getElementsByTagName("p")[0];
    var i = iScore = iStar = 0;
    var aMsg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ]

    for(i = 1; i < aLi.length; i++) {
        aLi[i - 1].index = i;
        //鼠标移过显示分数
        aLi[i - 1].onmouseover = function() {
            fnPoint(this.index);
            oP.style.display = "block";
            oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
            oP.innerHTML = "" + this.index + " 分" + aMsg[this.index - 1].match(/(.+)\|/)[1] 
                + "" + aMsg[this.index - 1].match(/\|(.+)/)[1];
        };
        //鼠标离开后恢复上次评分
        aLi[i - 1].onmouseout = function() {
            fnPoint();
            oP.style.display = "none";
        }
        //点击后进行评分处理
        aLi[i - 1].onclick = function() {
            iStar = this.index;
            oP.style.display = "none";
            oSpan.innerHTML = "" + (this.index) + " 分 (" + 
                aMsg[this.index - 1].match(/\|(.+)/)[1] + ")";
        }
        //评分处理
        function fnPoint(iArg) {
            iScore = iArg || iStar;
            for(i = 0; i < aLi.length; i++) {
                aLi[i].className = i < iScore ? "on" : "";
            }
        };
    }
}

本项目javascript部分的主要知识点是如何给DOM元素添加事件，项目中为列表中的元素添加了onmouseover、onmouseout、onclick事件。

总结

通过这个星级评分系统主要是对DOM元素的操作和事件进行了了解