案例介紹 歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！我們來用JavaScript編程實戰案例，做一個表情評價程式。用戶打星進行評價，表情會根據具體星星數量發生變化。 案例演示 點擊星星可以進行滿意程度評價，星星數量變換表情也會隨之變換。 源碼學習 進入核心代碼學習，我們先來看HTML ...
案例介紹
歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個表情評價程式。用戶打星進行評價，表情會根據具體星星數量發生變化。
案例演示
點擊星星可以進行滿意程度評價，星星數量變換表情也會隨之變換。
源碼學習
進入核心代碼學習，我們先來看HTML中的核心代碼。
<!-- 有個小院-興趣編程 -->
<div class="feedback-container">
<div class="emoji-container">
<i class="far fa-angry fa-3x"></i>
<i class="far fa-frown fa-3x"></i>
<i class="far fa-meh fa-3x"></i>
<i class="far fa-smile fa-3x"></i>
<i class="far fa-laugh fa-3x"></i>
</div>
<div class="rating-container">
<i class="fas fa-star fa-2x active"></i>
<i class="fas fa-star fa-2x"></i>
<i class="fas fa-star fa-2x"></i>
<i class="fas fa-star fa-2x"></i>
<i class="fas fa-star fa-2x"></i>
</div>
</div>
讓我們來編寫核心的JavaScript代碼，通過querySelector和querySelectorAll綁定HTML元素；
設置表情變換的顏色數組；設置表情初始為索引為0的表情；利用forEach迴圈添加星星的點擊事件，點擊星星更新表情；編寫更新表情的函數，利用forEach迴圈將星星和表情聯繫在一起；編寫表情變化的代碼，使用transform讓表情進行橫向轉換，設置表情顏色。
//有個小院-興趣編程
const starsEl = document.querySelectorAll(".fa-star");
const emojisEl = document.querySelectorAll(".far");
const colorsArray = ["red", "orange", "lightblue", "lightgreen", "green"];
updateRating(0);
starsEl.forEach((starEl, index) => {
starEl.addEventListener("click", () => {
updateRating(index);
});
});
function updateRating(index) {
starsEl.forEach((starEl, idx) => {
if (idx < index + 1) {
starEl.classList.add("active");
} else {
starEl.classList.remove("active");
}
});
emojisEl.forEach((emojiEl) => {
emojiEl.style.transform = `translateX(-${index * 50}px)`;
emojiEl.style.color = colorsArray[index];
});
}
你覺得面試時，會問這裡面的技術點嗎？
全網可搜：小院里的霍大俠， 免費獲取簡單易懂的實戰編程案例。編程/就業/副業/創業/資源。
私微信：huodaxia_xfeater
二維碼： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公眾號：有個小院（微信公眾號：yougexiaoyuan）
github：yougexiaoyuan (視頻源碼免費獲取)
（部分素材來源於互聯網，如有保護請聯繫作者）
