星星评分系统

HTML代码

    <article>
        <section class="start"></section>
        <section class="text"></section>
    </article>

JS代码

let textArr = ["很差", "较差", "一般", "满意", "非常满意"];
let startEle = document.getElementsByClassName("start")[0];
let textEle = document.getElementsByClassName("text")[0];

//被点击星星的下标
let imgIndex = -1;

//生成星星
function creatStart(num) {
    let str = ``;
    for (let i = 0; i < num; i++) {
        str += `<img src = "./starimg/empty.png" alt=${i}>`;
    }
    startEle.innerHTML = str;
}
creatStart(5);

//添加鼠标移入事件
startEle.addEventListener("mouseover", e => {
    let event = e || window.event;
    let imgEles = clearStar();
    //给点击及之前的星星变色
    if (event.target.localName == "img") {
        imgEles.filter((item, index) => index <= event.target.alt).map(item => item.src = "./starimg/shining.png");
        //添加相对应的文字内容
        textEle.innerText = [textArr[event.target.alt]];
    }
});

//添加鼠标移出事件
startEle.addEventListener("mouseout", e => {
    let event = e || window.event;
    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]];
    }
});

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

//清空
function clearStar() {
    let imgEles = document.getElementsByTagName("img");
    [...imgEles].map(item => { item.src = "./starimg/empty.png" });
    textEle.innerText = "";
    return [...imgEles];
}

效果图