HTML開寶箱代碼實現
在這篇文章中，我們將向您展示如何通過HTML代碼創建一個開寶箱的程序。該程序能夠產生一個隨機數字，同時顯示一條祝賀您獲得的獎品信息。
程序代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>開寶箱程序</title>
</head>
<body>
<h1>歡迎嘗試開寶箱</h1>
<button onclick="openTreasureBox()">點擊這里開始</button>
<p id="prize"></p>
<script>
function openTreasureBox() {
var prize = Math.floor(Math.random() * 10) + 1;
var message;
switch(prize) {
case 1:
message = "恭喜您獲得了一枚金幣。";
break;
case 2:
message = "恭喜您獲得了一個水晶。";
break;
case 3:
message = "恭喜您獲得了一件神秘物品。";
break;
case 4:
message = "恭喜您獲得了一把寶劍。";
break;
case 5:
message = "恭喜您獲得了一件鎧甲。";
break;
case 6:
message = "恭喜您獲得了一顆魔法石。";
break;
case 7:
message = "恭喜您獲得了一只小精靈。";
break;
case 8:
message = "恭喜您獲得了一本神秘的魔法書。";
break;
case 9:
message = "恭喜您獲得了一副魔法手套。";
break;
case 10:
message = "恭喜您獲得了一只遙控機器人。";
break;
}
document.getElementById("prize").innerHTML = message;
}
</script>
</body>
</html>上述代碼創建了一個簡單的HTML頁面，其中包含一個“開始”按鈕、一個空段落（用來顯示獎品信息）和一個JavaScript函數。當用戶單擊“開始”按鈕時，該函數將生成一個隨機數字（1到10之間），根據數字值判斷獲得的獎品類型，然后在空段落中顯示一條信息，祝賀用戶獲得獎品。
除此之外，您可以根據自己的需求對此代碼進行自定義，例如增加更多的獎品類型或者改變隨機數字的范圍等等。開始體驗HTML開寶箱的樂趣吧！上一篇vue實時更新data
下一篇html引入vue代碼