案例介绍

欢迎来到我的小院
  
  
  
  
  
  
  ，我是霍大侠 
  
  
  
  
  
  
 ，恭喜你今天又要进步一点点了！

我们来用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 (视频源码免费获取)

（部分素材来源于互联网 
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，如有保护请联系作者）