星星评分

最新推荐文章于 2022-08-22 15:42:05 发布

V________

最新推荐文章于 2022-08-22 15:42:05 发布

阅读量113

点赞数

分类专栏：练习文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/V________/article/details/112482888

版权

练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

let textArr = ["很差", "较差", "一般", "满意", "非常满意"];
let starEle = document.getElementsByClassName("star")[0];
let textEle = document.getElementsByClassName("text")[0];
//当前被点击的星星下标
let imgIndex = -1;
//生成星星
function createStar(num) {
    let str = "";
    for (let i = 0; i < num; i++) {
        str += `<img src="./starimg/empty.png" alt=${i}>`;
    }
    starEle.innerHTML = str;
}
createStar(5);

//添加鼠标移入事件
starEle.addEventListener("mouseover", e => {
    let event = e || window.event;
    let imgEles = clearStar();
    if (event.target.localName == "img") {
        imgEles.filter((item, index) => index <= e.target.alt).map(item => item.src = "./starimg/shining.png");
        //添加文本内容
        textEle.innerText = textArr[e.target.alt];
    }
});

//添加鼠标移出事件
starEle.addEventListener("mouseout", e => {
    let imgEles = clearStar();
    //实现点击效果
    if (imgIndex >= 0 && imgIndex < imgEles.length) {
        imgEles.filter((item, index) => index <= imgIndex).map(item => item.src = "./starimg/shining.png");
        textEle.innerText = textArr[imgIndex];
    }
});

//清空所有内容（星星变灰，文字清空）
function clearStar() {
    let imgEles = document.getElementsByTagName("img");
    [...imgEles].map(item => { item.src = "./starimg/empty.png"; });
    textEle.innerText = "";
    return [...imgEles];
}

//添加鼠标点击事件
starEle.addEventListener("click", e => {
    let event = e || window.event;
    if (event.target.localName == "img") {
        imgIndex = event.target.alt;
    }
});

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <article>
        <section class="star"> </section>
        <section class="text"></section>
    </article>
    <script src="./index2.js"></script>
</body>

</html>