javascript星级评分方法与实例

js实现的星级评分代码。
基本思路：
无论鼠标划过或点击某颗星星，就点亮这颗星星及之前的星星，并熄灭这颗星星之后的星星。

效果图：

1，html部分：
span即每颗星星，共10颗。

<div id=”star”>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

2，css部分：
顺便练习css3，于是用css写星星的形状。

#star{
text-align: center;
padding-top: 30px;
}
#star span{
margin: 50px 0;
position: relative;
display: inline-block;
color: #999;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-bottom: 20px solid #999;
border-left: 30px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star span:before {
border-bottom: 30px solid #999;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -18px;
left: -23px;
display: block;
content:”;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star span:after {
position: absolute;
display: block;
color: #666;
top: 3px;
left: -34px;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-bottom: 20px solid #999;
border-left: 30px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content:”;
}

/*用于点亮星星的class名为rated*/
#star span.rated,
#star span.rated:before,
#star span.rated:after
{
color:#ff0000;
border-bottom-color:#ff0000;
}

3，javascript星级评分代码：

var starGroup = document.getElementById(‘star’).children,
clickIndex; //定义一个全局变量用于储存被点击星星的索引值
window.onload = starFunc;
function starFunc() {
for (var i = 0; i < starGroup.length; i++) {//将每颗星星循环出来
starGroup[i].onmouseover = starHover;//绑定鼠标划到星星上的事件
starGroup[i].onclick = starClick;//绑定点击星星事件
starGroup[i].onmouseout = starOut;//绑定鼠标移出星星事件
starGroup[i].index = i;//获得每颗星星的索引
};
}

function starHover() {
var curIndex = this.index;//鼠标划过星星时，获得当前星星索引值
starLight(curIndex);//传入点亮星星的函数，从而执行点亮和熄灭动作
} //edit www.jb200.com

function starClick() {
var curIndex = this.index;//获得当前被点击星星的索引值
starLight(curIndex);//传入点亮星星的函数
clickIndex = curIndex;//将被点击星星的索引值记录下来
}

function starOut() {
//如果点击事件发生，被点击星星索引传入点亮星星函数，鼠标划出时将恢复点击时的状态，如果点击事件没有发生，星星将全部熄灭
starLight(clickIndex);
}

function starLight(index) {//点亮星星函数，当mouse over和点击事件发生时，将当前星星索引值传入，用以执行星星的点亮和熄灭动作
for (var i = 0; i < starGroup.length; i++) {
if (i <= index) {
starGroup[i].className = “rated”;//点亮星星
} else {
starGroup[i].className = “”;//熄灭星星
};
};
}

备注：以上星级评分并不够完整和严谨，仅作学习之用，大家自行扩展。