第245练的最终效果如下：
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″><link rel=”stylesheet” href=”index.css”><title>第245练</title></head><body><h2>随机表情符号</h2><div class=”section”><button class=”btn” id=”btn”>点击</button><p class=”emoji-name” id=”emoji-name”>表情符号名称</p></div><script src=”index.js”></script></body></html>
CSS:
body{padding: 0;margin: 0;background: #00a6bc;display: flex;flex-direction: column;justify-content: center;height: 100vh;align-items: center;font-family: ‘Courier New’, Courier, monospace;}h2{font-size: 2rem;color: aliceblue;}.section{text-align: center;}.btn{font-size: 5rem;border: none;background: #fff;border-radius: 10px;padding: 15px;filter: grayscale();transition: filter .2s ease-in-out;cursor: pointer;}.btn:hover{filter: grayscale(0);}.emoji-name{font-weight: 600;color: #fafafa;}
JS:
const btnEl = document.getElementById(“btn”);const emojiNameEl = document.getElementById(“emoji-name”);const emoji = [];async function getEmoji() {let response = await fetch(“https://emoji-api.com/emojis?access_key=773b58f681fb786fafdb8392e8b8a75ddc177fd1”);data = await response.json();for (let i = 0; i < 1500; i++) {emoji.push({emojiName: data[i].character,emojiCode: data[i].unicodeName,});}}getEmoji();btnEl.addEventListener(“click”, () => {const randomNum = Math.floor(Math.random() * emoji.length);btnEl.innerText = emoji[randomNum].emojiName;emojiNameEl.innerText = emoji[randomNum].emojiCode;});
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
