案例介紹
歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個表情評價程式，用戶打星進行評價，表情會根據具體星星數量發生變化，
案例演示
點擊星星可以進行滿意程度評價，星星數量變換表情也會隨之變換，
原始碼學習
進入核心代碼學習，我們先來看HTML中的核心代碼，
<!-- 有個小院-興趣編程 -->
<div >
<div >
<i ></i>
<i ></i>
<i ></i>
<i ></i>
<i ></i>
</div>
<div >
<i ></i>
<i ></i>
<i ></i>
<i ></i>
<i ></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 (視頻原始碼免費獲取)
（部分素材來源于互聯網，如有保護請聯系作者）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540310.html
標籤：JavaScript
下一篇：JS中的相等性判斷