JavaScript 中的硬币翻转模拟器
-
在 JavaScript 中使用
Math.random()模拟硬币翻转 - 使用 HTML 和 JavaScript 创建硬币翻转模拟器
- 使用 HTML 和 JavaScript 为 X 次创建硬币翻转模拟器
- 使用 CSS 动画、HTML 和 JavaScript 创建硬币翻转模拟器
本教程将演示如何使用 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';
}
}
硬币翻转模拟器现在可以使用了。
参见演示。
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn