原生javascript实现星级评分

作为资深菜鸟一枚,对javascript表示无力掌控,但自始至终坚定信念,自强不息,挖粪涂墙。

自知网络已有无数星级评分之案例教程,但星级评分对我来说,就如同Hello world一样,简约、经典、永恒,是入门的必备案例。在最近奋斗的途中,我也写了一小段javascript用于实现简单的星级评分。

基本思路:星级评分只做一件事,就是无论鼠标划过或点击某颗星星,就点亮这颗星星及之前的星星,并熄灭这颗星星之后的星星。

代码如下:

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>

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

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);//传入点亮星星的函数,从而执行点亮和熄灭动作
}

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 = “”;//熄灭星星
};
};
}

星级评分完成!

当然,这样的星级评分并不够完整和严谨,仅作学习之用。

查看在线DEMO

 

 



Leave a Reply

Your email address will not be published. Required fields are marked *

*