使用 HTML、CSS 和 JavaScript 建立現代互動式抽獎輪-css教學-PHP中文網

Building a Modern Interactive Raffle Wheel with HTML, CSS, and JavaScript

簡介

在當今的數位時代，使用互動式工具吸引您的社群對於促進參與和興奮至關重要。無論您是舉辦有獎活動、進行民意調查還是組織比賽，擁有視覺吸引力和互動性的抽獎輪都可以顯著增強用戶體驗。在本文中，我將引導您完成創建Modern Raffle 2024 的過程，這是一個使用HTML、CSS 和 構建的交互式抽獎輪JavaScript。我們將涵蓋從設定結構到添加動畫和整合社交共享功能的所有內容。

？使用的技術

為了實現這個項目，我利用了以下技術：

HTML5：用於建立網頁和建立互動元素。
CSS3：使用現代設計原則設計應用程式的樣式，包括玻璃態、動畫和響應式佈局。
JavaScript：增加互動性、處理使用者輸入、管理抽獎輪的邏輯和動畫。
Canvas API：用於繪製抽獎輪並為其設定動畫。
Font Awesome：合併向量圖示以獲得精美的外觀。
Google 字型：利用 Inter 字型實現乾淨、現代的排版。
請我喝杯咖啡：整合捐款按鈕來支持這個專案。

?️ 專案結構

此項目分為三個主要文件：

index.html：包含應用程式的 HTML 結構。
styles.css：儲存佈局和設計的所有 CSS 樣式。
script.js：包含支援互動性和動畫的 JavaScript 程式碼。

此外，還添加了頁腳部分來宣傳我的網站、LinkedIn、Twitter，並包含給我買杯咖啡按鈕以獲取支援。

？ HTML（索引.html）

HTML 結構設置了抽獎應用程式的主要組件，包括參與者和獎品的輸入部分、抽獎輪、宣布獲獎者的模式以及促銷頁腳。

登入後複製

html

現代抽獎 2024

？現代抽獎 2024 ？

    <div class="input-section">
        <h2>Add Participants</h2>
        <div class="input-group">
            <input type="text">


<pre class="brush:php;toolbar:false">
? CSS (styles.css)
The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.

登入後複製

/* 重置與基本樣式 */

{ 框大小：邊框框；保證金：0；填充：0；字體系列：'Inter'，無襯線字體； }

身體{
背景：線性漸變（135deg，#1e3c72，#2a5298）；
顏色：#ffffff;
顯示：flex；
彎曲方向：列； /* 垂直堆疊子元素 /
justify-content：flex-start； / 從頂部開始 /
對齊項目：中心；
最小高度：100vh；
/ 刪除隱藏的溢位以允許頁腳可見 */
溢位-x：隱藏；
}

/* 容器樣式 /
.container {
背景：rgba(255, 255, 255, 0.05);
背景過濾器：模糊（10px）；
內邊距：40px；
邊框半徑：20px;
文字對齊：居中；
寬度：90%；
最大寬度：900px；
盒子陰影: 0 8px 32px rgba(0, 0, 0, 0.37);
邊框: 1px 實心 rgba(255, 255, 255, 0.18);
動畫：淡入 1 秒緩入；
彈性：1； / 允許容器增長並將頁腳向下推 */
顯示：flex；
彈性方向：列；
對齊項目：中心；
}

/* 淡入動畫 */
@keyframes fadeIn {
來自{ 不透明度：0;變換：translateY(-20px); }
至 { 不透明度：1;變換：翻譯Y(0)； }
}

/* 標題樣式 */
h1 {
下邊距：30px;
字體大小：3rem;
字體粗細：700；
文字陰影：3px 3px 6px rgba(0,0,0,0.3);
}

/* 輸入部分 */
.input-section {
下邊距：40px；
寬度：100%；
}

.input-section h2 {
下邊距：15px;
字體大小：1.75rem；
字體粗細：600；
}

/* 輸入組 */
.input-group {
顯示：flex；
調整內容：居中；
對齊項目：中心；
間隙：10px；
下邊距：15px;
}

.輸入組輸入{
內邊距：12px 20px；
寬度：60%；
邊框：無；
邊框半徑：30px；
背景：rgba(255, 255, 255, 0.1);
顏色：#ffffff;
字體大小：1rem；
大綱：無；
過渡：背景 0.3 秒緩動，框陰影 0.3 秒緩動；
}

.input-group input::placeholder {
顏色：#dddddd;
}

.input-group 輸入：焦點 {
背景：rgba(255, 255, 255, 0.2);
盒子陰影: 0 0 10px rgba(255, 127, 80, 0.5);
}

.輸入群組按鈕 {
內邊距：12px 25px；
邊框：無；
邊框半徑：30px；
背景顏色：#ff7f50;
顏色：#fff；
字體大小：1rem；
字體粗細：600；
遊標：指針；
顯示：flex；
對齊項目：中心；
間隙：8px；
過渡：背景顏色 0.3 秒緩動，變換 0.2 秒緩動，框陰影 0.3 秒緩動；
}

.輸入組按鈕：懸停{
背景顏色：#ff5722;
變換：translateY(-2px);
盒子陰影：0 4px 10px rgba(0,0,0,0.3);
}

/* 使用者列表 */

使用者列表{

登入後複製

}

使用者列表 li {

    <div class="input-section">
        <h2>Add Participants</h2>
        <div class="input-group">
            <input type="text">


<pre class="brush:php;toolbar:false">
? CSS (styles.css)
The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.

登入後複製

}

/* 選定獎品 */

選定的獎品{

list-style: none;
max-height: 120px;
overflow-y: auto;
text-align: left;
padding: 0 20%;
width: 100%;

登入後複製

}

/* 輪式容器 */
.wheel-container {
位置：相對；
下邊距：40px；
寬度：100%；
顯示：flex；
彈性方向：列；
對齊項目：中心；
}

.wheel-wrapper {
位置：相對；
寬度：100%；
最大寬度：500px；
邊距：0 自動 20px;
}

/* 畫布樣式 */
畫布{
寬度：100%；
高度：自動；
邊框半徑：50%；
盒子陰影：0 0 20px rgba(0,0,0,0.5);
背景：#000;
過渡：變換 4s 三次貝塞爾曲線(0.33, 1, 0.68, 1);
}

/* 指標樣式 */
.指針{
位置：絕對；
上：-20px；
左：50%；
變換：translateX(-50%);
字體大小：2rem;
顏色：#ffeb3b；
動畫：彈跳2秒無限；
}

@keyframes 彈跳 {
0%, 100% { 變換: 翻譯X(-50%) 翻譯Y(0); }
50％{ 變換：translateX（-50％）translateY（-10px）; }
}

/* 旋轉按鈕 */

自旋Btn {

padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 1rem;

登入後複製

}

spinBtn：懸停{

font-size: 1.2rem;
font-weight: 500;
margin-top: 10px;

登入後複製

}

spinBtn：活動{

padding: 15px 35px;
border: none;
border-radius: 50px;
background-color: #32cd32;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
margin: 0 auto;

登入後複製

}

/* 模態樣式 */
.modal {
顯示：無；
位置：固定；
z 索引：100；
左：0；
上：0；
寬度：100%；
高度：100%；
溢位：自動；
背景顏色：rgba(0,0,0,0.8);
動畫：fadeInModal 0.5s 緩動；
}

@keyframes fadeInModal {
來自{ 不透明度：0; }
至 { 不透明度：1; }
}

.modal-內容 {
背景顏色: rgba(30, 30, 30, 0.95);
保證金：10% 自動；
內邊距：30px；
邊框半徑：15px；
寬度：90%；
最大寬度：600px；
文字對齊：居中；
盒子陰影：0 8px 25px rgba(0,0,0,0.5);
位置：相對；
動畫：向下滑動 0.5s 緩動；
}

@關鍵影格slideDown {
來自 { 變換：translateY(-50px);不透明度：0； }
到 { 變換：translateY(0);不透明度：1； }
}

.關閉按鈕 {
顏色：#bbb;
位置：絕對；
上：15px；
右：20px；
字體大小：28px;
字體粗細：粗體；
遊標：指針；
過渡：顏色 0.3 秒緩和；
}

.關閉按鈕：懸停，
.close-button:焦點 {
顏色：#fff；
}

.modal-content h2 {
下邊距：20px;
字體大小：2rem;
字體粗細：700；
}

.modal-content p {
字體大小：1.25rem；
下邊距：25px；
}

分享Btn {

background-color: #28a428;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);

登入後複製

}

shareBtn：懸停{

transform: translateY(0);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);

登入後複製

}

/* 頁腳樣式 /
.footer {
背景：rgba(255, 255, 255, 0.05);
背景過濾器：模糊（10px）；
內邊距：20px 0;
頂部邊框: 1px 實心 rgba(255, 255, 255, 0.2);
寬度：100%；
/ 確保頁腳位於內容下方 */
彈性收縮：0；
}

.footer-container {
顯示：flex；
彈性方向：列；
對齊項目：中心；
調整內容：居中；
最大寬度：900px；
邊距：0 自動；
內邊距：0 20px；
}

.footer-links {
顯示：flex；
間隙：20px；
下邊距：15px;
}

.footer-連結 {
顏色：#ffffff;
字體大小：1rem；
文字裝飾：無；
顯示：flex；
對齊項目：中心；
間隙：8px；
過渡：顏色 0.3s 緩動，變換 0.2s 緩動；
}

.footer-links a:hover {
顏色：#ff7f50；
變換：translateY(-2px);
}

.footer-連結 a i {
字體大小：1.2rem；
}

.footer-捐贈 {
上邊距：10px；
}

/* 頁腳響應式設計 */
@media（最小寬度：600px）{
.footer-container {
彈性方向：行；
對齊內容：空間之間；
}

登入後複製

}

/* 使用者清單的捲軸樣式 */

userList::-webkit-scrollbar {

    <div class="input-section">
        <h2>Add Participants</h2>
        <div class="input-group">
            <input type="text">


<pre class="brush:php;toolbar:false">
? CSS (styles.css)
The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.

登入後複製

}

userList::-webkit-scrollbar-track {

list-style: none;
max-height: 120px;
overflow-y: auto;
text-align: left;
padding: 0 20%;
width: 100%;

登入後複製

}

userList::-webkit-scrollbar-thumb {

padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 1rem;

登入後複製

}

userList::-webkit-scrollbar-thumb:hover {

font-size: 1.2rem;
font-weight: 500;
margin-top: 10px;

登入後複製

}

/* 用於輔助功能的按鈕焦點狀態 */
.輸入群組按鈕：焦點，

spinBtn：焦點，

shareBtn：焦點{

padding: 15px 35px;
border: none;
border-radius: 50px;
background-color: #32cd32;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
margin: 0 auto;

登入後複製

}

background-color: #28a428;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);

登入後複製

// 選擇 DOM 元素
const addUserBtn = document.getElementById('addUserBtn');
const usernameInput = document.getElementById('使用者名稱');
const userList = document.getElementById('userList');
const setPrizeBtn = document.getElementById('setPrizeBtn');
constprizeInput = document.getElementById('prize');
const selectedPrize = document.getElementById('selectedPrize');
const spinBtn = document.getElementById('spinBtn');
const WinnerModal = document.getElementById('winnerModal');
const closeBtn = document.querySelector('.close-button');
const WinnerText = document.getElementById('winnerText');
const shareBtn = document.getElementById('shareBtn');

// 狀態變數
讓使用者 = [];
讓獎品=「無」;
讓 isSpinning = false;

// 輪子配置
const canvas = document.getElementById('raffleWheel');
const ctx = canvas.getContext('2d');
const wheelRadius = canvas.width / 2;
const 顏色 = ['#FF5733', '#33FF57', '#3357FF', '#F333FF', '#FF33A8', '#33FFF6', '#FFC300', '#DAF7A6'];
讓startAngle = 0;
設弧 = 0;

// 初始化輪子
函數initializeWheel() {
if (users.length === 0) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
返回；
}
arc = (2 * Math.PI) / users.length;
畫輪（）；
}

// 抽獎輪
函數drawWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (令 i = 0; i const angle = startAngle i * arc;
ctx.fillStyle = 顏色[i % 顏色.長度];
ctx.beginPath();
ctx.moveTo(wheelRadius,wheelRadius);
ctx.arc(wheelRadius,wheelRadius,wheelRadius,角度,角度弧線,false);
ctx.closePath();
ctx.fill();

登入後複製

}

// 繪製指針箭頭
函數drawPointer() {
const 指標大小 = 20;
ctx.fillStyle = '#FFEB3B';
ctx.beginPath();
ctx.moveTo(wheelRadius - 指標大小, 0);
ctx.lineTo(wheelRadius pointSize, 0);
ctx.lineTo(wheelRadius, -pointerSize * 1.5);
ctx.closePath();
ctx.fill();
}

// 新增使用者事件
addUserBtn.addEventListener('click', addUser);
usernameInput.addEventListener('按鍵', (e) => {
if (e.key === 'Enter') addUser();
});

// 新增使用者的函數
函數 addUser() {
const username = usernameInput.value.trim();
if (使用者名稱 === "") {
showAlert("請輸入有效的使用者名稱。");
返回；
}
if (users.includes(使用者名稱)) {
showAlert("該使用者名稱已新增。");
返回；
}
users.push(用戶名);
updateUserList();
usernameInput.value = '';
初始化輪子();
}

// 更新使用者清單 UI
函數 updateUserList() {
userList.innerHTML = '';
users.forEach(用戶 => {
const li = document.createElement('li');
li.textContent = 使用者;
userList.appendChild(li);
});
}

// 設定有獎活動
setPrizeBtn.addEventListener('click', setPrize);
prizeInput.addEventListener('按鍵', (e) => {
if (e.key === 'Enter') setPrize();
});

// 設定獎品的函數
函數 setPrize() {
constprizeInputValue =prizeInput.value.trim();
if (prizeInputValue === "") {
showAlert("請輸入有效的獎品。");
返回；
}
獎品=獎品輸入值；
selectedPrize.textContent = 所選獎品：${prize};
prizeInput.value = '';
}

// 旋轉按鈕事件
spinBtn.addEventListener('點擊', spinWheel);

// 旋轉輪子的函數
函數 spinWheel() {
if (isSpinning) 回傳;
if (users.length === 0) {
showAlert("請新增至少一名使用者。");
返回；
}
if (獎品===「無」) {
showAlert("請設定獎品。");
返回；
}

登入後複製

}

// 停止輪盤並宣布獲勝者的函數
函數 stopRotateWheel() {
常數度 = 起始角度 * 180 / Math.PI 90;
const arcd = arc * 180 / Math.PI;
const index = Math.floor((360 - (度 % 360)) / arcd) % users.length;
const Winner = 使用者[索引];
showWinner(獲勝者);
isSpinning = false;
spinBtn.disabled = false;
}

// 平滑動畫的緩動函數
函數 easeOut(t, b, c, d) {
t /= d;
t--；
返回 c * (t * t * t 1) b;
}

// 顯示警報的函數
函數 showAlert(訊息) {
警報（訊息）；
}

// 在模態中顯示獲勝者的函數
函數 showWinner(獲勝者) {
WinnerText.textContent = ${winner} 贏得了 ${prize}！ ?;
WinnerModal.style.display = "block";
}

// 關閉模態事件
closeBtn.addEventListener('點擊', () => {
WinnerModal.style.display = "none";
});
window.addEventListener('點擊', (事件) => {
if (event.target === WinnerModal) {
WinnerModal.style.display = "none";
}
});

// 在 Twitter 分享
shareBtn.addEventListener('點擊', shareOnTwitter);

// 在 Twitter 上分享得獎者的功能
函數 shareOnTwitter() {
const text =encodeURIComponent(?恭喜${winnerText.textContent}!他們贏了${prize}!？#Giveaway #Community);
const url =encodeURIComponent('https://gladiatorsbattle.com');
const twitterUrl = https://twitter.com/intent/tweet?text=${text}&url=${url};
window.open(twitterUrl, '_blank');
}

// 初始車輪設定
初始化輪子();

    <div class="input-section">
        <h2>Add Participants</h2>
        <div class="input-group">
            <input type="text">


<pre class="brush:php;toolbar:false">
? CSS (styles.css)
The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.

登入後複製

以上是使用 HTML、CSS 和 JavaScript 建立現代互動式抽獎輪的詳細內容。更多資訊請關注PHP中文網其他相關文章！