JS实现简单的评分评星功能

最新推荐文章于 2024-06-06 10:16:06 发布

小松鼠绅士

最新推荐文章于 2024-06-06 10:16:06 发布

阅读量5.5k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/mydreamhope/article/details/54347050

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            list-style: none;
            height: 28px;
            width: 135px;
            /*清除浮动*/
            overflow: hidden;
        }

        .image {
            height: 28px;
            width: 27px;
            float: left;
            background: url(https://img-blog.csdn.net/20170111195511514?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlkcmVhbWhvcGU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center) no-repeat;
        }

        .imageOne {
            height: 28px;
            width: 27px;
            float: left;
            /*background-position: 0 -28px*/
            background: url(https://img-blog.csdn.net/20170111195511514?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlkcmVhbWhvcGU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center) no-repeat 0 -28px;

        }

    </style>
    <script>
        window.onload = function () {
            var box = document.getElementById("box");
            var images = box.getElementsByTagName("li");
            var info = document.getElementById('info');
            var starshow = 0;
            // 循环遍历每个星星
            for (var i = 0; i < images.length; i++) {
                images[i].onmouseover = (function (num) {
                    return function () {
                        //再遍历一次所有的星鼠标左边的星变成黄色,有边变成灰色
                        for (var j = 0; j < images.length; j++) {
                            if (j <= num) {
                                //黄色五角星添加类名imageOne
                                images[j].className = "imageOne";
                            } else {
                                images[j].className = "image";
                            }
                        }
                    }
                }(i));//立即调用，把i传给num
                images[i].onmouseup = (function (i) {
                    return function () {
                        starshow = 1+i;
                        info.innerHTML = '你打了'+starshow+'分!'
                    }
                }(i));
            }
        }

    </script>
</head>
<body>
<ul id="box">
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>

</ul>
<div id="info"></div>
</body>
</html>

小松鼠绅士

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现简单的评分评星功能

for (var i = 0; i < images.length; i++) { images[i].onmouseover = (function (num) { return function () { //再遍历一次所有的星鼠标左边的星变成黄色,有边变成灰色 for (var j = 0; j < images.length; j++
复制链接

扫一扫