美文网首页
一行代码实现星级评分

一行代码实现星级评分

作者: 我爱罗是个程序猿 | 来源:发表于2019-07-14 22:13 被阅读0次

    偶然看到别人用了这个方法,感觉好牛X,还用什么插件啊。。。。
    其实就是要用到slice()这个方法。

    JS代码如下:

    "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
     或者:
     "★".repeat(rate) + "☆".repeat(5-rate);
    

    1星到5星代码和效果:

    <script>
        var rate = 1;
        var star1 = "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
        // 或者:
        //var star1 =  "★".repeat(rate) + "☆".repeat(5-rate);
        console.log(star1);
    
        var rate = 2;
        var star2 = "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
        console.log(star2);
    
        var rate = 3;
        var star3 = "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
        console.log(star3);
    
        var rate = 4;
        var star4 = "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
        console.log(star4);
    
        var rate = 5;
        var star5 = "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
        console.log(star5);
    </script>
    

    效果出来了,优化一下代码:

    <script>
        var rate = [1,2,3,4,5];
        for(i = 0;i<rate.length;i++){
            var star = "★★★★★☆☆☆☆☆".slice(5 - rate[i], 10 - rate[i]);
            console.log(star);
        }
    </script>
    
    
    星级评分.png

    干一行,爱一行,学到老,活到老~

    相关文章

      网友评论

          本文标题:一行代码实现星级评分

          本文链接:https://www.haomeiwen.com/subject/lrxwkctx.html