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';
}
}
硬幣翻轉模擬器現在可以使用了。
參見演示。
