标签：分数 星星 元素 个数 score let 后台 整除

最近做项目的时候想做一个显示分数的功能，做出来之后做一下记录，有需要的同学可以做一下参考~

1、需求背景：

　　根据后台传的分数，判断显示多少个星星，后台总分为10分，每颗星星代表2分

2、用到的函数知识点：

　　1）appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

　　　　知识点链接：https://www.w3school.com.cn/jquery/manipulation_appendto.asp

　　2）prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。

　　　　知识点链接：https://www.w3school.com.cn/jquery/manipulation_prepend.asp

3、逻辑分析：

　　1）先获取后台传来的分数并准备好要插入的星星图片；

　　2）判断分数能否被2整除，整除时就在区域内添加同等数量的全星，如果不能整除则显示半颗星

4、核心js代码如下：

<!-- 评分 -->
    <script>

        let score = $('.score').text();
        let imgs = $('<img src="__TMPL__/mobilepublic/assets/images/star.png" alt="">');
        let quanstar = score / 2;
        let starcount = score % 2;
        if (starcount == 0) {
            for (let i = 0; i < quanstar; i++) {
                imgs.clone().appendTo($('.stars')); //在元素结尾追加元素
            }
        }else{
            
            for (let i = 0; i < quanstar - 1; i++) {
                imgs.clone().appendTo($('.stars')); //在元素结尾追加多个同一元素
            }
            $('.stars').prepend($('<img src="__TMPL__/mobilepublic/assets/images/banstar.png" alt="">')) //在元素开头追加元素
            
        }
    </script>

5、效果图

由于初学者，写的代码比较没有那么缜密，只是简单实现了效果，没有详细的去分析细微星星的差别，只要不被整除的就都用半星代替了，有些的不好的地方，请大家给予建议，大家一起加油！

标签：分数,星星,元素,个数,score,let,后台,整除
来源： https://www.cnblogs.com/binbinstudent2020/p/15662447.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。