本文主要是介绍java星级评价代码_JS实现星级评分,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
朋友给我一份星级评价的html代码,说不能实现多行星级评价,让我帮忙看一下。
帮朋友修改的,怕到时候自己也用到了,先把代码贴这里。
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
星级评分系统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(star.png) no-repeat;}
.star strong{color:#f60;padding-left:10px;}
.star li.on{background-position:0 -28px;}
function neo(id){ //这里id
var oStar = document.getElementById(id);
var aLi = oStar.getElementsByTagName("li");
var oUl = oStar.getElementsByTagName("ul")[0];
var oP = oStar.getElementsByTagName("p")[0];
var i = iScore = iStar = 0;
for (i = 1; i <= aLi.length; i++){
aLi[i - 1].index = i;
//点击后进行评分处理
aLi[i - 1].onclick = function (){
fnPoint(this.index);
//计算浮动层位置
oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
//匹配浮动层文字内容
oP.innerHTML = "" + this.index + " 分";
}
}
//评分处理
function fnPoint(iArg){
//分数赋值
iScore = iArg || iStar;
for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
}
};
物流速度
- 1
- 2
- 3
- 4
- 5
服务态度
- 1
- 2
- 3
- 4
- 5
发货速度
- 1
- 2
- 3
- 4
- 5
其实用的就是网上的一些办法,然后稍微修改了下。仅供参考。
实现效果:
这篇关于java星级评价代码_JS实现星级评分的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!