用 JavaScript 和 HTML 掷硬币 (1)

📌 相关文章

📜 用 JavaScript 和 HTML 掷硬币 (1)

📅 最后修改于: 2023-12-03 15:27:09.069000 🧑 作者: Mango

用 JavaScript 和 HTML 掷硬币

在本文中，我们将使用 JavaScript 和 HTML 来创建一个简单的硬币掷骰子应用程序。通过学习这个应用程序，您将学习如何使用 JavaScript 中的 Math 对象来生成随机数，并将这些随机数与 HTML 中的动态元素进行交互。我们将按照以下步骤来完成：

HTML 页面布局和样式
JavaScript 计算和显示掷骰子结果

HTML 页面布局和样式

我们的应用程序需要一个 HTML 页面和 CSS 样式表。首先，让我们创建一个基本的 HTML 页面结构，它包括一个掷骰子按钮和两个用于显示结果的区域：一个为掷骰子结果，一个为硬币翻转结果：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Coin Flipper</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>硬币掷骰子</h1>
	<button id="rollCoin">掷骰子</button>

	<div id="coinResultDiv">
		<h2>硬币</h2>
		<p id="coinResult"></p>
	</div>

	<div id="dieResultDiv">
		<h2>掷骰子结果</h2>
		<p id="dieResult"></p>
	</div>
	
	<script src="script.js"></script>
</body>
</html>

在我们的头部中，我们链接了一个名为 style.css 的样式表。我们还为应用程序提供了一个按钮，当用户单击该按钮时，可以掷骰子。我们还添加了两个带 id 的区域，一个用于显示硬币的翻转结果，另一个用于显示掷骰子结果。将样式添加到 style.css 文件中，以使我们的应用程序看起来更好。

body {
	background-color: #F2F2F2;
}

h1 {
	text-align: center;
	font-family: sans-serif;
	font-size: 36px;
	margin-top: 50px;
}

button {
	display: block;
	margin: 0 auto;
	margin-top: 30px;
	padding: 10px 20px;
	font-size: 24px;
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 10px;
	cursor: pointer;
}

button:hover {
	background-color: #3E8E41;
}

#coinResultDiv,
#dieResultDiv {
	display: inline-block;
	margin: 50px;
	padding: 20px;
	border: 2px solid black;
	border-radius: 10px;
	background-color: white;
	text-align: center;
}

h2 {
	font-family: sans-serif;
	font-size: 24px;
	margin-bottom: 30px;
}

p {
	font-family: sans-serif;
	font-size: 48px;
	margin: 0;
}

您可能已经注意到，我们没有使用 HTML 和 JavaScript 中的其他任何元素，如canvas或 SVG，来创建我们的应用程序。相反，我们使用了 HTML 和 CSS，利用其内置的布局管理和样式设置来构建应用程序。这样做的好处是使用 HTML 和 CSS 开发的应用程序更易于维护和调试，并且对于新手而言更加友好。

JavaScript 计算和显示掷骰子结果

接下来，我们将添加引用 JavaScript 文件的标记到 HTML 文件末端。新建一个 script.js 文件，并添加以下代码行。

// Get references to the DOM elements we need
var rollButton = document.querySelector("#rollCoin");
var coinResultDiv = document.querySelector("#coinResultDiv");
var dieResultDiv = document.querySelector("#dieResultDiv");
var coinResult = document.querySelector("#coinResult");
var dieResult = document.querySelector("#dieResult");

// Add event listeners to the button
rollButton.addEventListener("click", rollDice);

// Define our rollDice function
function rollDice() {
    // Generate a random number between 1 and 6 for the die roll
    var dieRoll = Math.floor(Math.random() * 6) + 1;
    // Generate a random number between 0 and 1 for the coin flip
    var coinFlip = Math.floor(Math.random() * 2);
    // Set the contents of the coinResult and dieResult paragraphs
    coinResult.textContent = coinFlip === 0 ? "正面" : "反面";
    dieResult.textContent = dieRoll;
    // Make the result divs visible
    coinResultDiv.style.display = "block";
    dieResultDiv.style.display = "block";
}

我们首先获取一个按钮和两个区域的引用，用于显示掷骰子和硬币翻转的结果。然后我们将 rollDice 函数添加到按钮的 click 事件监听器中。在我们的 rollDice 函数中，我们使用 Math.random() 方法来生成介于 0 和 1 的随机数字。我们将下轮硬币的结果存储在 coinFlip 变量中，使用正面或反面来表示。我们也用 Math.random() 方法来生成一个介于 1 和 6 的掷骰子结果，将其存储在 dieRoll 值中。最后，我们将结果显示在与先前HTML中的 div 元素相对应的文本段落中，并设置这些元素的 display 属性以block作为可见。

这将创建一个基本的硬币掷骰子应用程序。您可以使用 HTML 和 CSS 来美化和自定义这个应用程序，例如添加更多的区域来显示历史结算，或者为每个掷骰子和硬币成果添加动画效果。