javascript Bingo 将被叫号码添加到列表 - Javascript (1)

📌 相关文章

📜 javascript Bingo 将被叫号码添加到列表 - Javascript (1)

📅 最后修改于: 2023-12-03 14:42:23.888000 🧑 作者: Mango

JavaScript Bingo 将被叫号码添加到列表 - JavaScript

简介

在JavaScript Bingo游戏中，每次叫号码时，我们需要将该号码添加到一个列表中。本文将介绍如何使用JavaScript将被叫号码添加到列表中。

代码实现

我们需要一个HTML文件和一个JavaScript文件。在HTML文件中，我们需要一个用于显示被叫号码的列表。在JavaScript文件中，我们需要编写将被叫号码添加到列表的代码。

以下是HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bingo</title>
</head>
<body>
  <h1>Bingo</h1>
  <ul id="bingo-list"></ul>
  <button id="call-number">Call Number</button>
  <script src="bingo.js"></script>
</body>
</html>

该HTML代码包含一个用于显示被叫号码的无序列表（id为“bingo-list”）和一个用于调用JavaScript代码的按钮（id为“call-number”）。此外，我们在HTML文件的末尾导入了JavaScript文件（文件名为“bingo.js”）。

下面是JavaScript代码：

const callNumberButton = document.getElementById('call-number');
const bingoList = document.getElementById('bingo-list');

callNumberButton.addEventListener('click', () => {
  const number = callNumber();
  const li = document.createElement('li');
  li.innerText = number;
  bingoList.appendChild(li);
});

function callNumber() {
  const min = 1;
  const max = 75;
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

该JavaScript代码包含了以下操作：

获取按钮和列表的引用。
给按钮添加点击事件监听器，当按钮被点击时，执行以下操作：a. 调用callNumber()函数来生成一个随机号码。b. 创建一个li元素，并将随机号码设置为元素的文本内容。c. 将li元素添加到bingoList中。
定义callNumber()函数来生成一个1到75之间的随机整数。

总结

在这篇文章中，我们介绍了如何使用JavaScript将被叫号码添加到列表中。我们创建了一个HTML页面和一个JavaScript文件，通过添加事件监听器将随机数字添加到列表中。这些基本的JavaScript技能将帮助我们更好地理解和编写JavaScript代码。