javascript - 如何利用JS/CSS实现根据数值显示星星？

Question

在下是一个小公司新入坑的程序猿，平时都是代码的干活，这几天前端回老家爬山去了。但是刚好有前端的需求，需要在今晚完成。无奈不熟悉JS和CSS，整了半天没整出来，搜索的又全是评分功能，只好来提问。 已经从API...

天蓬老师 · Answer

<pre class='brush:php;toolbar:false;'><code><!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            .star-vote{
                width:120px;
                height:20px;
                position:relative;
                overflow:hidden;
            }
            .star-vote>span{
                position:absolute;
                width:120px;
                height:20px;
                background-size:cover;
                background-repeat:no-repeat;
                left:0px;
                top:0px;
            }
            .star-vote>.add-star{
                background-image:url("star.png(换成对应的有颜色星星的路径)");
            }
            .star-vote>.del-star{
                background-image:url("star-trans.png(换成透明星星的路径)");
                background-color:white;
            }
        </style>
    </head>
    <body>
        <p id="star_con" class="star-vote">
            <span id="add_star" class="add-star"></span>
            <span id="del_star" class="del-star"></span>
        </p>
        <script>
            window.onload=showStar(7);
            
            //n表示后台获取的星数
            function showStar(n){
                var con_wid=document.getElementById("star_con").offsetWidth;
                var del_star=document.getElementById("del_star");
                console.log(con_wid);
                
                //透明星星移动的像素
                var del_move=(n*con_wid)/10;
                
                del_star.style.backgroundPosition=-del_move+"px 0px";
                del_star.style.left=del_move+"px";
            }
        </script>
    </body>
</html></code></pre>

PHPz · Answer

http://www.radioactivethinking.com/rateit/example/example.htm 之前用过的一个插件

好奇你这个功能上线没0.0

天蓬老师 · Answer

其实这种打分有一种技术难度最低的方案:你不是已经取得了分数么，一般有一般就是，不同分数调用不同素材

高洛峰 · Answer

其实那个全透明的应该作为背景，然后那个满分星星的可以根据评分的高低适当的遮挡一部分来达到效果

怪我咯 · Answer

准备睡觉了，简单的写了下，基于jquery，注释也没怎么写，应该能看懂。

重新看了下需求，好像有点不一样，原理是一样的。

HTML部分

css部分

#startBox {
                width: 94px;
                height: 16px;
                background: url(img/bg.png);
                position: relative;
            }
            img {
                position: absolute;
                top: 0;
                left: 0;
            }
            p {
                width: 9.4px;
                height: 100%;
                float: left;
                z-index: 2;
                background: url(img/hover.png);
            }
            .startb {
                background-position: 101px;
            }
            .starta,
            .startb {
                opacity: 0;
            }
            .starta.show,
            .startb.show {
                opacity: 1;
            }

JS部分

var clickState = false;//是否点击了星星
            var oStrat = $("#startBox>p");
            oStrat.hover(function() {
                var startIndex = $(this).index();
                if (startIndex == 0) {
                    $(this).eq(startIndex).addClass("show");
                    if($(this).next().hasClass("show")){
                        $(this).next().removeClass("show");
                    }
                } else {
                    var prevState = $(this).prev().hasClass("show");
                    var nextState = $(this).next().hasClass("show");
                    console.log(prevState);
                    if (prevState&&nextState) {
                        $(this).next().removeClass("show");
                    }
                    else if(prevState){
                        $(this).addClass("show");
                    }
                }
            });
            oStrat.click(function(){
                clickState=true;
            });
            
            $("#startBox").mouseleave(function(){
                if(clickState){
                    clickState=false;
                }
                else{
                    oStrat.removeClass("show");
                }
            });

迷茫 · Answer

只是做展示的话可以简单一点,利用background-repeat来做可以想要多少个星星展示都可以（又不是七龙珠= =）：

html

css

    .box{
        width:100px;height:30px;
        background-image:url(./star_grey.png);
    }
    .star{
       width:0px;height:100%;
       background-image:url(./star_yellow.png);
    }

然后接下来需要做的就是根据分数来改变star的宽度就好；

注：徒手代码，未测试，只是展示个思路。

伊谢尔伦 · Answer

css

.stars{display: inline-block;height: 1.15rem;width:7.6rem;margin-right:.4rem;background: url(../images/stars_nor.png) no-repeat top left / auto 100%;vertical-align:baseline;}
.stars > span {display:block;height: 1.15rem;background: url(../images/stars_cur.png) no-repeat top left / auto 100%;vertical-align: top;}

html

高度自己修改下就行了

怪我咯 · Answer

你先定义好class，使用js根据数值来设置你要的class就好了

巴扎黑 · Answer

判断根据分数的不同显示星星的图片长度不同应该是可行的吧？但是如果需要手动评分的话就去看看楼上的回答吧

PHP中文网 · Answer

把你的透明素材反过来，星星是透明的，边上是不透明的，然后后面放一个橙色的p，宽度为score/10*100%,再后面放一个灰色的p，宽度100%，这样可以实现连续的星星分数，比如7.3。

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket