今天在做后台管理系统的时候,有一个需求是要给完成的任务评分,用星级显示,网上查找了一些实现方法,发现有两种方法相对来说比较简单有效。
我在这整理一下这两种方法,以后出现类似的需求可以直接拿来用了。
方法一:
1. 创建一个html页面后,先是在body里面加入如下代码:
<div οnmοuseοver="rate(this,event)">
<img src="img/star.png" title="1分" />
<img src="img/star.png" title="2分" />
<img src="img/star.png" title="3分" />
<img src="img/star.png" title="4分" />
<img src="img/star.png" title="5分" />
</div>
这里的名为star图片是空心的五星图片,可以去阿里图库下载
2. 然后js代码中写入rate方法
function rate(obj, oEvent) {
// 图片地址设置
var imgSrc = 'img/star.png'; //没有填色的星星
var imgSrc_2 = 'img/star_full.png'; //打分后有颜色的星星,这里的star_full图片时实心的有颜色的五星。
if(obj.rateFlag) return;
var e = oEvent || window.event;
var target = e.target || e.srcElement;
var imgArray = obj.getElementsByTagName("img");
for(var i = 0; i < imgArray.length; i++) {
imgArray[i]._num = i;
imgArray[i].onclick = function() {
if(obj.rateFlag) return;
obj.rateFlag = true;
//this._num+1这个值写入到数据库中,作为评分的依据。
可以在html页面加一个隐藏域,这里可以通过jquery把这个值赋值给隐藏域,保存的时候传给后台
};
}
if(target.tagName == "IMG") {
for(var j = 0; j < imgArray.length; j++) {
if(j <= target._num) {
imgArray[j].src = imgSrc_2;
} else {
imgArray[j].src = imgSrc;
}
}
} else {
for(var k = 0; k < imgArray.length; k++) {
imgArray[k].src = imgSrc;
}
}
}
这样就可以简单的实现五星评分效果了。
方法二:
一开始我是用这个方法的,但是这个方法测试时发现,jsp的页面在谷歌浏览器点击无效,也就是不会从空心五星变成实心五星,
所以后来改用上面的方法。
但是当时的实现效果还是挺好的,所以也整理出来,如果大家能发现在谷歌浏览器无效的原因,那最好了。
1. 先创建一个html页面,然后在body里面加入如下代码:
<div class="wrapper">
<div style="margin-left: 20px;line-height: 40px;float: left">评分:</div>
<div style="float: left;margin-left: 20px;margin-top: 5px">
<a href="javascript:dj(1);" class="img"><img src="img/star.png"/></a>
<a href="javascript:dj(2);" class="img"><img src="img/star.png"/></a>
<a href="javascript:dj(3);" class="img"><img src="img/star.png"/></a>
<a href="javascript:dj(4);" class="img"><img src="img/star.png"/></a>
<a href="javascript:dj(5);" class="img"><img src="img/star.png"/></a>
</div>
</div>
<input type="hidden" id="score">
这里是在每个图片上加了一个点击事件,下面有一个隐藏域来保存点击后的数值,传到后台
function dj(score){
$("#score").val(score);
}
score就是数字参数
2. 添加css代码
.wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;}
a{float:left;width:26px;height:20px;background:url(img/sx.png) 0 -40px no-repeat;}
3. 加入js代码
window.onload = function(){
var star = document.getElementsByClassName('img');
var temp = 0;
for(var i = 0, len = star.length; i < len; i++){
star[i].index = i;
star[i].onmouseover = function(){
clear();
for(var j = 0; j < this.index + 1; j++){
star[j].style.backgroundPosition = '0 0';
}
}
star[i].onmouseout = function(){
for(var j = 0; j < this.index + 1; j++){
star[j].style.backgroundPosition = '0 -40px';
}
current(temp);
}
star[i].onclick = function(){
temp = this.index + 1;
current(temp);
}
}
//清除所有
function clear(){
for(var i = 0, len = star.length; i < len; i++){
star[i].style.backgroundPosition = '0 -40px';
}
}
//显示当前第几颗星
function current(temp){
for(var i = 0; i < temp; i++){
star[i].style.backgroundPosition = '0 0';
}
}
};
OK,这样也就可以实现五星评分了