如何使用JavaScript实现点击按钮随机生成指定列表内emoji的功能

实现逻辑 #

• 提前定义包含所有预设emoji的数组
• 获取按钮和展示区域的DOM节点
• 为按钮绑定点击事件，每次点击时生成符合数组下标的随机索引，取出对应emoji渲染到展示区域

完整可运行代码示例 #

<!-- 页面结构 -->
<button id="drawBtn">随机抽取emoji</button>
<div id="emojiDisplay" style="font-size: 48px; margin-top: 20px;"></div>

<script>
// 预设emoji列表，可根据需求自行增删内容
const emojiList = ['😀', '😁', '🤣', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎', '😍', '😘', '🥳', '😇', '🙃', '🤪', '🤩', '🥰', '🙂']
const drawBtn = document.getElementById('drawBtn')
const displayArea = document.getElementById('emojiDisplay')

drawBtn.addEventListener('click', () => {
  // 生成0到emojiList.length-1的随机整数作为索引
  const randomIndex = Math.floor(Math.random() * emojiList.length)
  // 渲染随机取出的emoji
  displayArea.textContent = emojiList[randomIndex]
})
</script>

注意说明 #

Math.random()返回的是[0, 1)区间的浮点数，乘以数组长度后得到[0, 数组长度)的数值，使用Math.floor()向下取整后刚好可以覆盖所有合法数组下标，不会出现索引越界问题。

内容的提问来源于stack exchange，提问作者user16956594