技術標籤：htmljavascript

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];
}

效果圖