js实现星级评分效果（非常规5个li代码）

最新推荐文章于 2021-03-27 21:37:02 发布

weixin_30270561

最新推荐文章于 2021-03-27 21:37:02 发布

阅读量190

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fanbi/p/7596102.html

版权

1. 前言

此方案受到JS单行写一个评级组件启发，自己写了一个简单Demo。

功能有正常滑动，动态显示实心星星个数；当点击确认，则保持当前的实心星星个数；再移动时未点击，则离开后还是保持之前的状态。

此demo没有文字信息等提示，可以根据需要自行添加使用。

2. 代码

<!DOCTYPE html>
<html>
<head>
	<title>Star Rating</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">

	var lastStarNum =0;
	
	function mOut(obj){
		obj.innerHTML="★★★★★☆☆☆☆☆".slice(5-lastStarNum,10-lastStarNum);
	}

	function mOver(){
		var obj = document.getElementById("starRate");
		var offsetTopVal  = obj.offsetTop;
		var pos=getPos(event);
		//star width is 13.2px,first star is offset 8px from left, near half of star, the star will just become black.
		//6 is adjust parameter
		var i = Math.floor((pos.x + 6)/13.2);
　　　　　　　　　 //star height is 21px
		if(i <= 5 & i > 0&& pos.y < offsetTopVal + 21 && pos.y > offsetTopVal){
			obj.innerHTML="★★★★★☆☆☆☆☆".slice(5-i,10-i);
			//console.log("MousePage(x,y)=("+pos.x+" ,"+pos.y+") starNumber="+Math.floor((pos.x+6)/13.2));

			$(obj).click(function(){
			lastStarNum = i;
		})
		}		
	}

	$('*').mousemove(function(){
		mOver();
	});
	
	 function getPos(ev)
        {
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;  
            return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};     
       }
	</script>
</head>
<body>
<div>Star Rating:</div>
<div id="starRate" οnmοuseοver="mOver()"  οnmοuseοut="mOut(this)" style="width:66px;height:21px">☆☆☆☆☆</div>

</body>
</html>

3.效果

4. 总结

亮点在于"★★★★★☆☆☆☆☆".slice(5-lastStarNum,10-lastStarNum) 的使用，而不需要网上大多数的星级评分系统那样是5个li元素，然后加个class来控制。

转载于:https://www.cnblogs.com/fanbi/p/7596102.html

weixin_30270561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现星级评分效果（非常规5个li代码）

1. 前言此方案受到JS单行写一个评级组件启发，自己写了一个简单Demo。功能有正常滑动，动态显示实心星星个数；当点击确认，则保持当前的实心星星个数；再移动时未点击，则离开后还是保持之前的状态。此demo没有文字信息等提示，可以根据需要自行添加使用。2. 代码<!DOCTYPE html><html><head> &...
复制链接

扫一扫