js通过星星评分

最新推荐文章于 2023-09-29 06:13:43 发布

原创最新推荐文章于 2023-09-29 06:13:43 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

78 篇文章

订阅专栏

本文介绍了一种基于分数的星星评分显示方法，通过将1-10的分数转换为5个星星的显示，包括全星、半星和无星。通过一个JavaScript函数实现分数到星星数组的转换，并使用HTML和jQuery来展示评分结果。

通过获取分数，给某个元素实现星星打分

我这里分数是1-10；一共5个星星

效果如下：

//result通过ajax获取
var starArray = convertStars(result.value);
var str ='';
for (var i =0;i<starArray.length;i++) {
	if(starArray[i]==1){
	      str += '<img src="../../images/star.png" />';
}	
	if(starArray[i]==2){
	      str += '<img src="../../images/starHalf.png" />';
    }
}
$("#stars").html(str);

function convertStars(value){
	var num = value/2;	
	var array = [];
	for(var i = 1; i<=5; i++){
		if (i<=num) {
			array.push(1);
		}else{
			if(i-0.5==num){
				array.push(2);
			}else{
				array.push(0);
			}
		}
	}
	return array;
}

convertStars(value)函数获取分数，判断如果是全星，则在array里加入一个1，如果是半星则加入一个2，否则加入一个0，然后返回一个数组

调用函数，通过结果判断有几个全星，和半星