【每日一练】239—JS实现一款表情评价动画效果

每日一练1年前 (2023)发布 admin
2,253 0

第239练的最终效果:

【每日一练】239—JS实现一款表情评价动画效果

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>
    <link
      rel=”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];
  });
}
© 版权声明

相关文章

暂无评论

暂无评论...