JS实现星级评分

最新推荐文章于 2024-07-20 09:19:45 发布

请叫我果爸

最新推荐文章于 2024-07-20 09:19:45 发布

阅读量499

点赞数

分类专栏： JavaScrip 文章标签： javascript 评分

本文链接：https://blog.csdn.net/qq_25280063/article/details/53009867

版权

JavaScrip 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

朋友给我一份星级评价的html代码，说不能实现多行星级评价，让我帮忙看一下。

帮朋友修改的，怕到时候自己也用到了，先把代码贴这里。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>星级评分系统</title>
<style> 
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;}
</style>
<script type="text/javascript"> 
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 = "<b>" + this.index + "</b> 分";
		}
	}
	
	//评分处理
	function fnPoint(iArg){
		//分数赋值
		iScore = iArg || iStar;
		for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";	
	}
	
};
</script>
</head>
<body>
<div id="wuliu" class="star" οnmοuseοver="neo('wuliu')">
		<span>物流速度</span>
		<ul>
			<li><a href="javascript:;">1</a></li>
			<li><a href="javascript:;">2</a></li>
			<li><a href="javascript:;">3</a></li>
			<li><a href="javascript:;">4</a></li>
			<li><a href="javascript:;">5</a></li>
		</ul>
		<p></p>
</div>
<div id="fuwu" class="star" οnmοuseοver="neo('fuwu')">
		<span>服务态度</span>
		<ul>
			<li><a href="javascript:;">1</a></li>
			<li><a href="javascript:;">2</a></li>
			<li><a href="javascript:;">3</a></li>
			<li><a href="javascript:;">4</a></li>
			<li><a href="javascript:;">5</a></li>
		</ul>
		<p></p>
</div>
<div id="fahuo" class="star" οnmοuseοver="neo('fahuo')">
		<span>发货速度</span>
		<ul>
			<li><a href="javascript:;">1</a></li>
			<li><a href="javascript:;">2</a></li>
			<li><a href="javascript:;">3</a></li>
			<li><a href="javascript:;">4</a></li>
			<li><a href="javascript:;">5</a></li>
		</ul>
		<p></p>
</div>
</body>
</html>

其实用的就是网上的一些办法，然后稍微修改了下。仅供参考。

实现效果：