Javascript五星評分是一種常見的用戶評價方式,它允許用戶對一個產品或服務打分,通常采用五顆星的方式,星級越高表示用戶對該產品或服務的評價越好。在使用Javascript五星評分的過程中,我們可以使用HTML和CSS來構建評分界面,而Javascript則可以實現用戶互動并處理評分邏輯。
首先,讓我們看一下HTML和CSS的基本結構,如下所示:
<div class="star-rating">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<style>
.star-rating {
font-size: 0;
}
.star {
display: inline-block;
width: 20px;
height: 20px;
background-image: url(star.png);
}
.star:hover,
.star.active {
background-image: url(star-selected.png);
}
</style>
在上面的代碼中,我們首先定義了一個class為star-rating的div元素,用來包含五個星星的評分元素。每個星星都是一個class為star的div元素,其寬高固定為20px,并使用一個背景圖片來表示星星的樣式。當用戶鼠標移動到星星上方時,我們會改變元素的背景圖片以實現高亮效果,并且該元素會標記一個class為active來表示已被選中。
下面是通過Javascript實現五星評分的代碼:
var rating = document.querySelector('.star-rating');
var stars = rating.querySelectorAll('.star');
var ratingValue = 0;
for (var i = 0; i < stars.length; i++) {
stars[i].addEventListener('click', function() {
ratingValue = this.dataset.value;
setRating();
});
stars[i].addEventListener('mouseover', function() {
resetRating();
this.classList.add('active');
var previous = this.previousElementSibling;
while (previous) {
previous.classList.add('active');
previous = previous.previousElementSibling;
}
});
stars[i].addEventListener('mouseout', function() {
resetRating();
setRating();
});
}
function setRating() {
for (var i = 0; i < stars.length; i++) {
if (i < ratingValue) {
stars[i].classList.add('active');
} else {
stars[i].classList.remove('active');
}
}
}
function resetRating() {
for (var i = 0; i < stars.length; i++) {
stars[i].classList.remove('active');
}
}
在上面的Javascript代碼中,我們首先獲取到了class為star-rating的元素,以及其內部包含的class為star的五個星星元素,并定義了一個ratingValue變量來表示用戶當前選中的評分值。然后,我們通過循環遍歷每個星星元素,并為其綁定了三個事件:click、mouseover和mouseout,用來處理用戶的評分行為。
在用戶單擊星星元素時,我們會更新ratingValue變量的值,并調用setRating()函數以更新當前選中的評分值。在用戶鼠標移動到星星元素上時,我們會使用resetRating()函數來重置所有星星的狀態,并將當前元素和其前面所有元素標記為active狀態,以實現高亮效果。當鼠標移出星星元素時,我們會再次調用resetRating()函數以重置所有星星的狀態,并調用setRating()函數以更新當前選中的評分值。
綜上所述,Javascript五星評分是一種易于實現且用戶友好的評分方式,它可以為用戶提供直觀的評價體驗,并為產品和服務提供有用的反饋信息。如果你正在開發一個需要用戶評價功能的網站或應用程序,那么Javascript五星評分是一個值得考慮的選擇。