javascript星级评分（多个）

最新推荐文章于 2023-04-03 20:42:52 发布

weixin_30481087

最新推荐文章于 2023-04-03 20:42:52 发布

阅读量185

点赞数

原文链接：http://www.cnblogs.com/elves/p/4552462.html

版权

JS打多个类型星级评分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript星级评分</title>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        .wrapper
        {
            height: 20px;
            padding: 5px;
            width: 130px;
            margin: 100px auto 10px;
        }
        .wra
        {
            height: 20px;
            padding: 5px;
            width: 130px;
            margin: 100px auto 10px;
        }
        a
        {
            float: left;
            width: 26px;
            height: 20px;
            background: url(img/star.png) 0 -20px no-repeat;
        }
        p
        {
            font: 24px SimSun;
            width: 130px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div id="a1" class="wrapper">
        <a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
        <a href="javascript:;"></a><a href="javascript:;"></a>
    </div>
    <p id="p1">
    </p>
    <div id="a2" class="wrapper">
        <a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
        <a href="javascript:;"></a><a href="javascript:;"></a>
    </div>
    <p id="p2">
    </p>
    <div id="a3" class="wrapper">
        <a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
        <a href="javascript:;"></a><a href="javascript:;"></a>
    </div>
    <p id="p3">
    </p>
    <div id="a4" class="wrapper">
        <a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
        <a href="javascript:;"></a><a href="javascript:;"></a>
    </div>
    <p id="p4">
    </p>
</body>
</html>
<script type="text/javascript">
    $(function () {
        var objs = $(".wrapper a");
        $(objs).mouseover(function () {
            var ix = $(this).index();
            sets(ix, this);
        });

        $(objs).mouseout(function () {
            var ix = $(this).parent().attr("rel");
            if (ix == undefined)
                ix = -1;
            sets(ix, this);
        });

        $(objs).click(function () {
            var ix = $(this).index();
            $(this).parent().next("p").html((ix + 1) + ' 颗星');
            $(this).parent().attr("rel", ix);
            sets(ix, this);
        });
    });
    function sets(ix, obj) {
        $(obj).parent().children().each(function (ik) {
            if (ik <= ix) {
                $(this).css("backgroundPosition", '0 0');
            } else {
                $(this).css("backgroundPosition", '0 -20px');
            }
        });
    }
</script>

单个星级评分（纯JS)：

<script type="text/javascript">
    window.onload = function () {
            var star = document.getElementById('a1').getElementsByTagName('a');

            var temp = 0;

            for (var i = 0, len = star.length; i < len; i++) {
                star[i].index = i;

                star[i].onmouseover = function () {
                    clear();
                    for (var j = 0; j < this.index + 1; j++) {
                        star[j].style.backgroundPosition = '0 0';
                    }
                }

                star[i].onmouseout = function () {
                    for (var j = 0; j < this.index + 1; j++) {
                        star[j].style.backgroundPosition = '0 -20px';
                    }
                    current(temp);
                }

                star[i].onclick = function () {
                    temp = this.index + 1;
                    document.getElementById('p1').innerHTML = temp + ' 颗星';
                    current(temp);
                }
        }
        //清除所有
        function clear() {
            for (var i = 0, len = star.length; i < len; i++) {
                star[i].style.backgroundPosition = '0 -20px';
            }
        }
        //显示当前第几颗星
        function current(temp) {
            for (var i = 0; i < temp; i++) {
                star[i].style.backgroundPosition = '0 0';
            }
        }
    };
</script>

图片

star

转载于:https://www.cnblogs.com/elves/p/4552462.html

weixin_30481087

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript星级评分（多个）

JS打多个类型星级评分：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta charset="UT...
复制链接

扫一扫