<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./index.js"></script>
<style>
i{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
window.addEventListener(`load`, function () {
let divEle = document.getElementsByTagName(`div`)[0];
let imgArr = ["./img/empty.png", "./img/shining.png"]
let score = [`差`, `一般`, `好`];
function init() {
for (let i = 0; i < 5; i++) {
let newSpan = document.createElement(`span`);
let newImg = document.createElement(`img`);
newSpan.appendChild(newImg);
divEle.appendChild(newSpan);
let img = document.getElementsByTagName(`img`);
let span = document.getElementsByTagName(`span`);
span[i].dataset.index = i;;
img[i].src = imgArr[0];
img[i].dataset.index = i;
};
let newI = document.createElement(`i`);
divEle.appendChild(newI)
}
init();
let index = 0;
divEle.addEventListener(`click`, function (event) {
event = event || window.event;
let trueEle = document.getElementsByClassName(`true`);
index = trueEle.length;
});
divEle.addEventListener(`mouseout`, function (event) {
event = event || window.event
if (event.target.localName == `img`) {
let img = document.getElementsByTagName(`img`);
for (let i = 0; i < img.length; i++) {
img[i].src = imgArr[0];
}
let i = document.getElementsByTagName(`i`)[0];
i.innerHTML = "";
}
let img = document.getElementsByTagName(`img`)
for (let i = 0; i < index; i++) {
img[i].src = imgArr[1]
if (index == 1) {
let i = document.getElementsByTagName(`i`)[0];
i.innerHTML = score[0]
} else if (index > 1 && index <= 3) {
let i = document.getElementsByTagName(`i`)[0];
i.innerHTML = score[1]
} else if (index > 3) {
let i = document.getElementsByTagName(`i`)[0];
i.innerHTML = score[2]
}
}
});
divEle.addEventListener(`mouseover`, function (event) {
event = event || window.event;
let trueEle = document.getElementsByClassName(`true`);
if (event.target.localName == `img`) {
let img = document.getElementsByTagName(`img`)
for (let i = 0; i < img.length; i++) {
img[i].src = imgArr[0];
img[i].className = ""
if (event.target.dataset.index == i) {
for (let i = 0; i <= event.target.dataset.index; i++) {
img[i].src = imgArr[1]
img[i].classList.toggle(`true`)
}
}
}
let i = document.getElementsByTagName(`i`)[0];
if (trueEle.length == 1) {
i.innerHTML = score[0]
} else if (trueEle.length > 1 && trueEle.length <= 3) {
i.innerHTML = score[1]
} else if (trueEle.length > 3) {
i.innerHTML = score[2]
}
};
});
})