HOWTO · JavaScript
JavaScript 中的硬币翻转模拟器
本教程将帮助你使用 JavaScript、HTML 和 CSS 模拟硬币翻转。
本页内容
本教程将演示如何使用 JavaScript 和 HTML 制作硬币翻转模拟器。还包括基于 CSS 的视觉硬币翻转。
在 JavaScript 中使用 Math.random() 模拟硬币翻转
内置的 Math.random() 方法可以在 JavaScript 中模拟掷硬币。它会生成一个介于 0 和 0.99999999 之间的随机数，因此你可以使用生成的数字来确定它会产生正面还是反面。
翻转的断点在 0.50，如下图：
let number = Math.random();
if (number < 0.5) {
console.log('HEAD');
} else {
console.log('TAIL');
}
当值在 0 和 0.49999999999999999 之间时，结果将是一个尾巴。
使用 HTML 和 JavaScript 创建硬币翻转模拟器
你可以使用上面的代码制作一个硬币翻转模拟器，使用 HTML 按钮触发 JavaScript 代码并在 div 元素中显示结果。
首先，在你的 HTML 元素中，创建一个按钮和一个具有 id 属性的 div：
<body>
<button id="flp" type="button">Flip the coin</button>
<div id="rslt"></div>
</body>
之后，向按钮元素添加一个 script 标签，并为其附加一个事件侦听器以侦听点击事件。当按钮被按下时，JavaScript 将调用 fpClick() 函数，如下所示：
<body>
<button id="flp" type="button">Flip the coin</button>
<div id="rslt"></div>
<script>
let button = document.getElementById("flp");
function fpClick() {
}
button.addEventListener("click", fpClick);
</script>
</body>
使用 Math.random() 方法，fpClick() 函数将执行代码以模拟掷硬币。HTML 正文中 div 元素的内容将被设置为结果：
<body>
<button id="flp" type="button">Flip the coin</button>
<div id="rslt"></div>
<script>
let button = document.getElementById("flp");
let result = document.getElementById("rslt");
function fpClick(event) {
let num = Math.random();
if (num < 0.5) {
result.innerHTML = "You got Head";
} else {
result.innerHTML = "You got Tail";
}
}
button.addEventListener("click", fpClick);
</script>
</body>
你可以在此处观看演示。
你还可以制作一个模拟器，它会根据用户的输入翻转多达 x 次。在下一节中，我们将讨论如何做到这一点。
使用 HTML 和 JavaScript 为 X 次创建硬币翻转模拟器
你需要创建一个 HTML 输入元素来接受用户的输入，以便根据用户的需要多次翻转硬币：
<body>
<div>
<label for="qt">How many times to fli?</label>
<input type="number" id="qt" min="1" value="1" />
</div>
<button id="flp" type="button">Flip the coin</button>
<div id="rslt"></div>
</body>
然后，更新 fpClick() 函数以获取输入标签的值并使用 for 语句循环掷硬币代码。
翻转的结果必须包含在一个 <p> 标记中并保存在一个变量中（在下面的示例中命名为 score）。收集完模拟器的所有结果后，将其指定为 div 元素的内容。
查看 fpClick() 函数的以下代码：
let button = document.getElementById('flp');
let result = document.getElementById('rslt');
function fpClick(event) {
let qty = document.getElementById('qt').value;
let score = '';
for (let i = 0; i < qty; i++) {
let num = Math.random();
if (num < 0.5) {
score += '<p>You got Head</p>';
} else {
score += '<p>You got Tail</p>';
}
}
result.innerHTML = score;
}
button.addEventListener('click', fpClick);
你现在将获得与你在输入元素中键入的数字一样多的结果。
点击这里查看演示。
使用 CSS 动画、HTML 和 JavaScript 创建硬币翻转模拟器
要使用 CSS 制作硬币翻转模拟器，你需要使用该语言设置样式和动画的三个 div 元素。
首先，在新的 HTML 正文标记中编写以下代码：
<body>
<h1>Click on the coin below to flip</h1>
<div id="coin_side">
<div class="side_head"></div>
<div class="side_tail"></div>
</div>
</body>
三个 div 组件代表浏览器中的硬币，父 div 硬币用作硬币头部和尾部的容器。
接下来，编写以下 CSS 代码来设置硬币的样式：
h1 {
text-align: center;
}
#coin {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
cursor: pointer;
}
.side {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
backface-visibility: hidden;
}
.head {
background-color: green;
z-index: 10;
}
.tail {
background-color: blue;
transform: rotateX(-180deg);
}
#coin 样式将你的视觉硬币放置在 HTML 页面的中心，并使其宽和高为 100 像素。光标也会变成一个指针，表示可以点击。
通过将所有边的边框半径设置为 50%，.side 样式会将代表硬币边的两个 div 组件变成一个圆形。backface-visibility 属性被隐藏以防止在旋转时背面可见。
硬币的每一面都由头部和尾部样式着色。头部的颜色为黄色，而尾部的颜色为红色。
head 类的 z-index 属性设置为 10 以将其置于 tail 类之上。tail 类的 transform: rotateX() 属性将是 -180deg 以与旋转动画对齐。
现在让我们使用@keyframes 制作 CSS 动画，因为 div 元素已被设计为视觉硬币。
@keyframes resultHead {
from {
transform: rotateX(0);
}
to {
transform: rotateX(1800deg);
}
}
@keyframes resultTail {
from {
transform: rotateX(0);
}
to {
transform: rotateX(1980deg);
}
}
该规则将确定动画的初始条件。上面的代码将变换属性设置为 rotate(0)，确保翻转总是从可见的头部开始。
如果翻转的结果是正面，硬币将翻转 1800 度。因为一次翻转是 360 度，产生了五个翻转动画。
当翻转结果是尾巴时，硬币会旋转五次，然后旋转 180 度以显示尾巴的一面。这就是为什么尾部类的 rotateX 值设置为 -180 度的原因。
如果指定了 CSS 动画规则，你可以使用动画属性从 CSS 类中调用它们：
.flipHead {
animation: resultHead 2s ease-out forwards;
}
.flipTail {
animation: resultTail 2s ease-out forwards;
}
至此，我们完成了模拟器的 CSS 代码。处理翻转的脚本是唯一剩下的东西。
将事件监听器添加到 div id='coin_side' 并从中调用 fpClick() 函数以在单击时翻转硬币。fpClick() 函数和之前一样，将使用 Math.random() 方法来获取翻转结果。
将设置硬币 div 的 className 属性，而不是将结果发送到 HTML 元素：
let coin = document.getElementById('coin_side');
coin.addEventListener('click', fpClick);
function fpClick() {
var flipResult = Math.random();
if (flipResult < 0.5) {
coin.className = 'flipHead';
} else {
coin.className = 'flipTail';
}
}
硬币翻转模拟器现在可以使用了。
参见演示。
