案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用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
二维码： https://www.yuucn.com/wp-content/uploads/2022/11/1669777238-fc7aa5051075c5b.jpg
公众号：有个小院（微信公众号：yougexiaoyuan）
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）