【每日一练】215—个人信息卡片效果

每日一练11个月前发布 admin
1,311 0

第215练最终效果:

【每日一练】215—个人信息卡片效果

完整代码实现过程:

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>第215练</title>
    <link rel=”stylesheet” href=”style.css” />
  </head>
  <body>
    <div class=”testimonial-container”>
      <img
        src=”https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80″
        alt=”user-image”
      />
      <p class=”text”>
        JavaScript 命名约定:变量
        JavaScript 变量区分大小写。 因此,JavaScript 变量的小写和大写字符是不同的:
      </p>
      <h4 class=”username”> JavaScript </h4>
    </div>
    <script src=”index.js”></script>
  </body>
</html>

CSS:

body {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  font-family: cursive;
}
.testimonial-container {
  width: 500px;
  height: 100px;
  background-color: slateblue;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  min-width: 400px;
  padding: 70px 20px;
  margin: 5px;
  color: white;
  position: relative;
}
img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -50px;
}
.username {
  font-size: 13px;
  font-weight: 100;
}

JS:

const testimonials = [
  {
    name: “JavaScript”,
    photoUrl:
      “https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80”,
    text: ” JavaScript 命名约定:变量;JavaScript 变量区分大小写。 因此,JavaScript 变量的小写和大写字符是不同的:”,
  },
  {
    name: “JavaScript-01”,
    photoUrl:
      “https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80”,
    text: “JavaScript 命名约定:变量;JavaScript 变量区分大小写。 因此,JavaScript 变量的小写和大写字符是不同的:”,
  },
  {
    name: “JavaScript-02”,
    photoUrl:
      “https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80”,
    text: “JavaScript 命名约定:变量;JavaScript 变量区分大小写。 因此,JavaScript 变量的小写和大写字符是不同的:”,
  },
];
const imgEl = document.querySelector(“img”);
const textEl = document.querySelector(“.text”);
const usernameEl = document.querySelector(“.username”);
let idx = 0;
updateTestimonial();
function updateTestimonial() {
  const { name, photoUrl, text } = testimonials[idx];
  imgEl.src = photoUrl;
  textEl.innerText = text;
  usernameEl.innerText = name;
  idx++;
  if (idx === testimonials.length) {
    idx = 0;
  }
  setTimeout(() => {
    updateTestimonial();
  }, 10000);
}
© 版权声明

相关文章

暂无评论

暂无评论...