最近做了一个页面显示了一条数据详细信息的星级评价,自己在网上也查找了相关资料,最后实现了如下效果,做个笔记:
1.css
.dim{/*默认是灰色的星星*/
float: left;
width: 20px;
height: 20px;
background: url('../plug-in/score/img/start1.png');
background-size: 100%;
}
.highlight{/*评论是几就会点亮几颗星星*/
float: left;
width: 20px;
height: 20px;
background: url('../plug-in/score/img/start2.png');
background-size: 100%;
}
2.显示评分的区域:
<div class="commentScore" id="starContainer">
<a class="dim"></a>
<a class="dim"></a>
<a class="dim"></a>
<a class="dim"></a>
<a class="dim"></a>
</div>
3.js部分:
/**默认显示当前数据的处理状态*/
$(document).ready(function() {
var score='${reservationPage.commentScore}';//用户评分
/*调用方法,想要亮几颗就传入几*/
highlightStar(score);
});
function highlightStar(num){
var starBg = document.getElementById("starContainer");
var stars = starBg.getElementsByTagName("a");
for(var i = 0 ; i < num ; i++){
stars[i].className = 'highlight';
}
}