JS或类似语言做五星评分图标输出的唠叨

一年前做项目的时候,有一个需求是做五星评分的图标输出控制,类似于淘宝购物评价的那种。

刚拿到的时候,我以为很简单,不是五个星星的图标嘛。

啪啪啪敲出几行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;
}

这个函数还可以简写一些,为了更好理解,所以是按逻辑思路一步一步走的。

五星好评

阅读: 1009
js
在同意共创许可协议(CC BY-NC-SA-4.0)的前提下,您可以转载本文。
橙色阳光
https://oss.so/article/80

相关阅读

留言评论

4条留言
摩天之星
厉害厉害
犀牛大叔
你的https是怎么实现的?要钱吗?
橙色阳光
Let's encrypt
天兴工作室
js渣表示只会用css搞,两张图,一张遮罩另一张,转换成百分比算...

精品域名

出售精品域名 Yumi.La ¥5000.00