基于bootstrap、jquary的评价打分

最新推荐文章于 2024-05-24 08:52:48 发布

半块菠萝

最新推荐文章于 2024-05-24 08:52:48 发布

阅读量851

点赞数

本文链接：https://blog.csdn.net/qq_21703215/article/details/71124819

版权

html 同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

javascript

21 篇文章 0 订阅

订阅专栏

bootstrap

5 篇文章 0 订阅

订阅专栏

HTML代码

<div style="margin-top:20px">
    <span class="glyphicon glyphicon-star" style="font-size: 32px;  color: red" onclick="Star(0)" id="star"></span>
    <span class="glyphicon glyphicon-star" style="font-size: 32px;  color: red" onclick="Star(1)"></span>
    <span class="glyphicon glyphicon-star" style="font-size: 32px;  color: red" onclick="Star(2)"></span>
    <span class="glyphicon glyphicon-star" style="font-size: 32px;  color: red" onclick="Star(3)"></span>
    <span class="glyphicon glyphicon-star" style="font-size: 32px;  color: red" onclick="Star(4)"></span>
    <span class="glyphicon glyphicon-star-empty" style="font-size: 32px; color: Gold; " onclick="Star(0)"></span>
    <span class="glyphicon glyphicon-star-empty" style="font-size: 32px; color: Gold; " onclick="Star(1)"></span>
    <span class="glyphicon glyphicon-star-empty" style="font-size: 32px; color: Gold; " onclick="Star(2)"></span>
    <span class="glyphicon glyphicon-star-empty" style="font-size: 32px; color: Gold; " onclick="Star(3)"></span>
    <span class="glyphicon glyphicon-star-empty" style="font-size: 32px; color: Gold; " onclick="Star(4)"></span>

    <br>
    <input name="Score" />
</div>

js代码

<script>
    window.onload = function () {
        var star = $(".glyphicon");
        for (var i = 0; i < 5; i++) {
            star.eq(i).hide();
        }
    }
    function Star(num)
    {
        var star = $(".glyphicon");
        for (var i = 0; i < num + 1; i++)
        {
            star.eq(i).show();
        }
        for(var i = num + 1; i < 6;i++)
        {
            star.eq(i).hide();
        }
        for (var i = 5; i < 6 + num; i++) {
            star.eq(i).hide();
        }
        for (var i = num + 6 ; i < 11; i++)
        {
            star.eq(i).show();
        }
    }
</script>