第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”><imgsrc=”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);}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
