第239练的最终效果：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″ /><meta http-equiv=”X-UA-Compatible” content=”IE=edge” /><meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /><title>第239练</title><linkrel=”stylesheet”href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css”integrity=”sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==”crossorigin=”anonymous”referrerpolicy=”no-referrer”/><link rel=”stylesheet” href=”index.css” /></head><body><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><script src=”index.js”></script></body></html>
CSS:
body {margin: 0;display: flex;justify-content: center;height: 100vh;align-items: center;background-color: #fafafa;}.feedback-container {background-color: white;width: 400px;height: 200px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);border-radius: 10px;position: relative;}.emoji-container {position: absolute;left: 50%;transform: translateX(-50%);top: 20%;width: 50px;height: 50px;border-radius: 50%;display: flex;overflow: hidden;}.far {margin: 1px;transform: translateX(0);transition: transform 0.2s;}.rating-container {position: absolute;left: 50%;transform: translateX(-50%);bottom: 20%;}.fa-star {color: lightgray;cursor: pointer;}.fa-star.active {color: gold;}
JS:
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];});}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
