【每日一练】245—JS实现一款表情随机图

每日一练7个月前发布 admin
1,558 0

第245练的最终效果如下:

【每日一练】245—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″>
    <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;
});
© 版权声明

相关文章

暂无评论

暂无评论...