
JS或类似语言做五星评分图标输出的唠叨
😂 这篇文章最后更新于1473天前,您需要注意相关的内容是否还可用。
一年前做项目的时候,有一个需求是做五星评分的图标输出控制,类似于淘宝购物评价的那种。
刚拿到的时候,我以为很简单,不是五个星星的图标嘛。
啪啪啪敲出几行js搞定[嗯,图标就以Fa图标为例吧]
var str = ''; var num = parseInt(star); for (var i = 0; i < num; i++) { str += '<span class="fa fa-star"></span>'; }
等等,好像有问题,评分并不是只有实心的呀,只好继续补充
var str = ''; var num = parseInt(star); for (var i = 0; i < num; i++) { str += '<span class="fa fa-star"></span>'; } for (var i = 0; i < (5-num);i++) { str += '<span class="fa fa-star-o"></span>'; }
嗯,基本上能用了,没毛病;
但是后来,我才看清楚,评分是x.x的,有小数点的呀。假若是4.5这种,就应该是有半边实心的。
思来想去,搞出一个下面的生成,自以为没问题了,还经过测试的呢。【这个函数因为需要算半心,为了方便,让后台给的0-100的数】
var heart = function(num) { var newNum = num / 10; var str = ''; for (var i = 0, n = Math.floor(newNum / 2); i < n; i++) { str += '<span class="fa fa-star"></span>'; } if (num % 20 >= 10) { str += '<span class="fa fa-star-half-o"></span>'; } else if (num % 20 > 0) { str += '<span class="fa fa-star-o"></span>'; } for (var i = 0, n = 5 - Math.ceil(newNum / 2); i < n; i += 2) { str += '<span class="fa fa-star-o"></span>'; } return str; }
啧啧,这个方法写完就已经懵圈了,我也不管这么多,就放上去用了一年多,因为item评分都是4-5分的,没毛病……
后来,突然出现了一个1分的测试项……卧槽,就变成1颗实心两颗空心了……总共才三颗心,这函数毛病就大了。
想来想去,始终是自己没控制好输出的内容数量,但中间插入半心确实又经常出问题。
猛然想到了数组,用数组的下标与预先设置数量,完全可以避免出现这种“缺心眼”的毛病。
var heart = function(num) { var str = ''; // 默认全部空心 var heart = ['-o','-o','-o','-o','-o']; // 取得实心的数量 var loop = Math.floor(num/20); // 看看有没有半心的 var half = !!(num/20 >= loop + 0.5); // 我们把心数组的实心循环出来 for (var i = 0; i < loop; i++) { heart[i] = ''; } // 嗯,再把对应位置的半心加上去 if (half) heart[loop] = '-half-o'; // 最后组装html for (var i = 0, n = heart.length; i < n; i++) { str += '<span class="fa fa-star'+heart[i]+'"></span>'; } return str; }
这个函数还可以简写一些,为了更好理解,所以是按逻辑思路一步一步走的。