備註:
滑鼠移動到相對應的圖案上會觸發圖片切換，以及底下文字的變化。
滑鼠點擊後會鎖定圖片和文字，使其不會再受到其他動作影響。
另外增加重新評分按鍵，以便重製評分。
!!圖片和路徑需自行更換!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
document.addEventListener("DOMContentLoaded", function() {
let pic = document.images;
let piclen = pic.length;
for (let i = 0; i < piclen; i++) {
pic[i].addEventListener("mouseout", mouseout);
pic[i].addEventListener("mouseover", mouseover);
pic[i].addEventListener("click", Click);
}
document.getElementById("clean").addEventListener("click", clean);
});
function mouseover() {
let pic = document.images;
for (let i = 0; i < this.id.substr(5); i++) {
pic[i].src = "image/chngstar.gif";
document.getElementById("score").innerHTML = `目前評分${i + 1}顆星`;
}
}
function mouseout() {
let pic = document.images;
for (let i = 0; i < this.id.substr(5); i++) {
pic[i].src = "image/star.gif";
document.getElementById("score").innerHTML = "";
}
}
function Click() {
let pic = document.images;
for (let i = 0; i < this.id.substr(5); i++) {
pic[i].src = "image/chngstar.gif";
document.getElementById("score").innerHTML = `選定${i+1}顆星`;
}
let piclen = pic.length;
for (let i = 0; i < piclen; i++) {
pic[i].removeEventListener("mouseout", mouseout);
pic[i].removeEventListener("mouseover", mouseover);
pic[i].removeEventListener("click", Click);
}
}
function clean() {
let pic = document.images;
let piclen = pic.length;
document.getElementById("score").innerHTML = "";
for (let i = 0; i < piclen; i++) {
pic[i].src = "image/star.gif";
pic[i].addEventListener("mouseout", mouseout);
pic[i].addEventListener("mouseover", mouseover);
pic[i].addEventListener("click", Click);
}
document.getElementById("clean").addEventListener("click", clean);
}
</script>
</head>
<body>
<div>
<img id="idimg1" src="image/star.gif" />
<img id="idimg2" src="image/star.gif" />
<img id="idimg3" src="image/star.gif" />
<img id="idimg4" src="image/star.gif" />
<img id="idimg5" src="image/star.gif" />
</div>
<div>
<input type="button" value="重新評分" id="clean" />
<span id="score"></span>
</div>
</body>
</html>
留言列表
