通过JS实现分数对应的星星评分体现

Posted 2023-03-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过JS实现分数对应的星星评分体现相关的知识，希望对你有一定的参考价值。

问题详情，根据具体的分数来在界面上体现相应的星星个数。比如2.9分，5颗星就是2颗整星，第三颗星是十分之九，后两颗星是空的。现在这个功能我已实现。具体代码已贴上。
但问题是，实现一个我是可以的，但是4组里统一用该代码实现会造成每个里面都是20颗星星，有没有办法分别顺序的执行读取4个分数并执行，互不干扰？

参考技术A 　　打开paintcode，绘制一个漏空的星星体现：

　　操作为：创建canvas 大小30 * 30；修改名称为Star；绘制一个矩形 30 * 30；绘制一个星星 30 * 30 ，星星弧度改为55 %；选中矩形和星星，点击difference，变成bezier 曲线。

　　接下来，我们添加一个新的canvas，绘制我们需要的控件。

　　操作为：创建星星评分canvas 150 * 30；创建背景矩形 150 * 30；创建填充矩形 100 * 30；放置5个第一步中绘制的漏空的星星到canvas 上，5个星星组成一个group；然后就可以看到我们想要的视图基本已经出来了。

　　下一步：将我们画好的生成style文件加入到我们的工程中;
　　先创建一个新的空白工程，添加一个自定义的类ScoreStarsView 继承自UIView;

　　操作为点击paintcode 的file- export 生成stylekit文件放到我们新建的工程下，然后打开xcode ，添加生成是ScoreStarsKit 文件。然后在自定义的ScoreStarsView 类中导入kit，然后在drawRect 进行绘制。最后在storyboard中添加uiview ，把这个view的类改成ScoreStarsView；然后模拟器运行。参考技术B $('.Cscore') 是一个对象数组，你要分开来写用jq的 each来遍历 $('.Cscore').each(function(i))

或者 for(var i = 0; i<$('.Cscore').lenght; i++ )
//这样来实现 $('.Cscore')[i]

//这里的i只是一个例子在循环里面你可以换一个变量

这样就是一个一个的执行，如果不是遍历，或者循环，jq的对象相对于每一个都执行四次本回答被提问者采纳参考技术C 把$(".Cscore")改成 $("#id")来弄追问

遍历ID和class不一样吗？

追答

通过$(".Cscore")是获取当前页面上所有class="Cscore"的元素，怎么能一样？

js实现星级评分效果（最短代码）

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" onmouseover="mOver()"  onmouseout="mOut(this)" style="width:66px;height:21px">☆☆☆☆☆</div>

</body>
</html>

3. 总结

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

以上是关于通过JS实现分数对应的星星评分体现的主要内容，如果未能解决你的问题，请参考以下文章