实现简易星星评分

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    body {
        display: flex;
    }

    span {
        text-shadow: 0px 0px 5px red;
        display: none;

    }
</style>

<body>
    <div>
        <img src="../starimg/empty.png" alt="0">
        <img src="../starimg/empty.png" alt="1">
        <img src="../starimg/empty.png" alt="2">
        <img src="../starimg/empty.png" alt="3">
        <img src="../starimg/empty.png" alt="4">
    </div>
    <div>
        <span>很差</span>
        <span>较差</span>
        <span>一般</span>
        <span>较好</span>
        <span>很好</span>
    </div>

    <script>
        let imgEle = document.getElementsByTagName("img");
        let spanEle = document.getElementsByTagName("span");
        let divEle = document.getElementsByTagName("div")[0];

        // 移入
        divEle.addEventListener("mouseover", e => {
            let arr2 = [...spanEle];
            // 遍历文字拿到下标
            for (let i = 0; i <= arr2.length - 1; i++) {
                arr2[i].style.display = "none"
            }
            // 评分重新移入
            for (let i = 0; i < imgEle.length; i++) {
                imgEle[i].src = "../starimg/empty.png"
            }
            let event = e || window.event;
            if (event.target.locaName = "img") {
                for (let i = 0; i <= event.target.alt; i++) {
                    imgEle[i].src = "../starimg/shining.png"
                    spanEle[event.target.alt].style.display = "inline"
                }
            }
        })
        
        // 移出
        divEle.addEventListener("mouseout", e => {
            let event = e || window.event;
            let arr1 = [...imgEle]
            for (let i = 0; i <= arr1.length - 1; i++) {
                arr1[i].src = "../starimg/empty.png"
            }
            spanEle.innerText = ""
            for (let i = 0; i <= indeximg; i++) {
                imgEle[i].src = "../starimg/shining.png"
                spanEle[indeximg].style.display = "inline"
            }
        })

        // 被点击图片下标
        let indeximg = -1;
        divEle.addEventListener("click", e => {
            let event = e || window.event;
            indeximg = event.target.alt;
        })
    </script>
</body>

</html>
posted @ 2021-01-04 18:26  Wwink  阅读(63)  评论(0)    收藏  举报