14.JavaScript实现星星评分

JavaScript实现星星评分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left {
            float: left;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div id="stars" class="left">
        <img src="./image/empty.png" alt="">
        <img src="./image/empty.png" alt="">
        <img src="./image/empty.png" alt="">
        <img src="./image/empty.png" alt="">
        <img src="./image/empty.png" alt="">
    </div>
    <div id="comment" class="left">

    </div>
    <script>
        //制作一个星星评分
        var divStars = document.getElementById("stars");
        var divComment = document.getElementById("comment");
        var attitude = ["差", "较差", "一般", "好", "很好"];
        var starNum = -1; //记录当前第几颗星星被点击
        var starArray = Array.from(divStars.children); //星星数组

        //鼠标移入
        divStars.onmouseover = function (e) {
            if (e.target.tagName === "IMG") { //事件源是图片
                //把鼠标移动到的星星替换图片
                e.target.src = "./image/shining.png";
                //把鼠标移动到的星星之前的星星替换图片
                var prev = e.target.previousElementSibling;
                while (prev) {
                    prev.src = "./image/shining.png";
                    prev = prev.previousElementSibling;
                }
                //把鼠标移动到的星星之后的星星替换图片
                var next = e.target.nextElementSibling;
                while (next) { //把鼠标移动到的星星之后的星星替换图片
                    next.src = "./image/empty.png";
                    next = next.nextElementSibling;
                }

                var index = starArray.indexOf(e.target); //找到鼠标移动到的星星的序号
                divComment.innerHTML = attitude[index]; //显示对应的评论
            }
        }

        //鼠标点击
        divStars.onclick = function (e) {
            if (e.target.tagName === "IMG") {
                //记录当前点击的星星序号
                starNum = starArray.indexOf(e.target);
            }
        }

        //鼠标移出
        divStars.onmouseout = function (e) {
            if (starNum !== -1) { //鼠标点击事件发生，将评分固定在点击的星星上
                for (var i = 0; i < divStars.children.length; i++) {
                    if (i <= starNum) {
                        divStars.children[i].src = "./image/shining.png";
                        
                    } else {
                        divStars.children[i].src = "./image/empty.png";
                    }
                }
                divComment.innerHTML = attitude[starNum]; //显示对应的评论
            } else {
                for (var i = 0; i < divStars.children.length; i++) {
                    divStars.children[i].src = "./image/empty.png";
                }
                divComment.innerHTML = ""; //不显示评论
            }
        }
    </script>
</body>

</html>
index.html

代码中有关图片路径的地方要自行替换

 

效果展示：

 

posted @ 2020-04-26 23:03  lanshanxiao  阅读(426)  评论(0)  编辑  收藏  举报