在現代Web開發中，JavaScript（JS）是一種強大的編程語言，廣泛應用于前端開發。通過原生JS，我們可以實現各種有趣的功能，比如一個簡易的抽獎系統。本文將詳細介紹如何使用原生JS實現一個簡易的抽獎系統。
在開始編寫代碼之前，我們需要準備一些基本的內容：
首先，我們創建一個簡單的HTML結構，包含一個抽獎按鈕和一個顯示抽獎結果的區域。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>簡易抽獎系統</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>簡易抽獎系統</h1>
<button id="startBtn">開始抽獎</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
接下來，我們為抽獎系統添加一些簡單的樣式。
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
最后，我們編寫JavaScript代碼來實現抽獎的核心功能。
// 獲取DOM元素
const startBtn = document.getElementById('startBtn');
const resultDiv = document.getElementById('result');
// 定義獎品列表
const prizes = ['一等獎', '二等獎', '三等獎', '謝謝參與'];
// 定義抽獎函數
function drawPrize() {
// 隨機選擇一個獎品
const randomIndex = Math.floor(Math.random() * prizes.length);
const prize = prizes[randomIndex];
// 顯示抽獎結果
resultDiv.textContent = `恭喜你獲得了：${prize}`;
}
// 綁定點擊事件
startBtn.addEventListener('click', drawPrize);
container：用于包裹整個抽獎系統的內容。startBtn：開始抽獎的按鈕。result：用于顯示抽獎結果的區域。body：設置頁面的基本樣式，包括字體、背景顏色等。container：設置抽獎系統的容器樣式，包括背景顏色、內邊距、圓角等。button：設置按鈕的樣式，包括背景顏色、字體顏色、圓角等。#result：設置抽獎結果的樣式，包括字體大小、字體粗細等。prizes：定義了一個包含所有獎品的數組。drawPrize：抽獎函數，通過Math.random()隨機選擇一個獎品，并將其顯示在resultDiv中。startBtn.addEventListener：為開始抽獎按鈕綁定點擊事件，點擊按鈕時調用drawPrize函數。當你點擊“開始抽獎”按鈕時，系統會隨機選擇一個獎品并顯示在頁面上。例如，可能會顯示“恭喜你獲得了：一等獎”或“恭喜你獲得了：謝謝參與”。
這個簡易的抽獎系統雖然功能簡單，但可以通過以下方式進行擴展和優化：
通過本文的介紹，我們學習了如何使用原生JS實現一個簡易的抽獎系統。這個系統雖然簡單，但涵蓋了HTML、CSS和JavaScript的基本用法，適合初學者學習和實踐。希望本文能對你有所幫助，祝你編程愉快！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
