jquery简单实现星星评分组件

一般我们会从后台接收评分参数，那我们前端如何像淘宝，豆瓣一样做五星好评之类的显示呢，这里我们用实例讲解一下

提示：我做的比较粗糙，采用了向上取整的方式，怎么说，就是小数点统一向上取整，比如4.5就是五分好评，其实淘宝评分的时候也就只能是一星一星的是吧，都是整数，但是豆瓣就可能不止是整数，所以还是根据自己的业务做判断吧

思路：最重要的思路就是把评分转化成数组表示，比如：评分是四分我们就这么表示[1,1,1,1,0],之所以数组的长度是五是因为这里默认最高分就是五分，当然也可以是十分。看自己的需求吧

素材：空白的星星和点亮的星星

var arr=[];//声明的空数组用来表示评分
			function commitScore(score){//传进来评分参数
				arr=[];//首次清空数组，以免多次执行的时候会累加数组
				var score=Math.ceil(score);//向上取整评分参数
				for(var i=1;i<=5;i++){//控制数组的长度不能超过5
					if(i<=score){//这里主要是根据评分设置数组，比如3分数组就会是[1,1,1,0,0]
						arr.push(1)
					}else{
						arr.push(0)
					}				
				}
				console.log(arr);
			
			}

接下来是通过数组用星星表达评分

                function stars(){
					commitScore(8.5);//这里应该传一个你从服务器接收到的评分参数
					var string="";
					for(var i=0;i<arr.length;i++){//输出循环五个<img>标签
						if(arr[i]=="1"){
							string+='<img src="img/starSel.png">'//如果是1就用点亮的星星
						}else{
							string+='<img src="img/star.png">'//如果数组是0就用空白的星星
						}
					}
					$(".container").html(string)//将堆砌好的五个img标签赋值给文档中写死的容器，让页面渲染
			}

最后看下结果截图，这里评分是3.3

好了，如果有啥不懂得欢迎留言~~~~~~~~~

jquery简单实现星星评分组件

猜你喜欢