Membina Roda Cabutan Interaktif Moden dengan HTML, CSS dan JavaScript

Pengenalan

Dalam era digital hari ini, melibatkan komuniti anda dengan alatan interaktif adalah penting untuk memupuk penyertaan dan keseronokan. Sama ada anda menganjurkan pemberian hadiah, menjalankan tinjauan pendapat atau menganjurkan pertandingan, mempunyai roda undian yang menarik secara visual dan interaktif boleh meningkatkan pengalaman pengguna dengan ketara. Dalam artikel ini, saya akan membimbing anda melalui proses mencipta Cabutan Moden 2024, roda undian interaktif yang dibina dengan HTML, CSS dan JavaScript. Kami akan merangkumi segala-galanya daripada menyediakan struktur kepada menambahkan animasi dan menyepadukan ciri perkongsian sosial.

? Teknologi yang Digunakan

Untuk menghidupkan projek ini, saya memanfaatkan teknologi berikut:

• HTML5: Untuk menstruktur halaman web dan mencipta elemen interaktif.
• CSS3: Untuk menggayakan aplikasi dengan prinsip reka bentuk moden, termasuk glassmorphism, animasi dan reka letak responsif.
• JavaScript: Untuk menambah interaktiviti, mengendalikan input pengguna dan mengurus logik dan animasi roda undian.
• API Kanvas: Untuk melukis dan menghidupkan roda undian.
• Font Hebat: Untuk menggabungkan ikon vektor untuk rupa yang digilap.
• Fon Google: Menggunakan fon Inter untuk tipografi yang bersih dan moden.
• Beli Saya Kopi: Disepadukan butang derma untuk menyokong projek.

?️ Struktur Projek

Projek ini disusun menjadi tiga fail utama:

1. index.html: Mengandungi struktur HTML aplikasi.
2. styles.css: Memegang semua gaya CSS untuk reka letak dan reka bentuk.
3. script.js: Termasuk kod JavaScript yang menguatkan interaktiviti dan animasi.

Selain itu, bahagian pengaki diperbadankan untuk mempromosikan tapak web saya, LinkedIn, Twitter dan menyertakan butang Beli Saya Kopi untuk sokongan.

? HTML (index.html)

Struktur HTML menyediakan komponen utama aplikasi undian, termasuk bahagian input untuk peserta dan hadiah, roda undian, mod untuk mengumumkan pemenang dan pengaki untuk promosi.

html

Cabutan Moden 2024

? Cabutan Moden 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.

/* Tetapkan Semula dan Gaya Asas */

• { saiz kotak: kotak sempadan; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }

badan {
latar belakang: kecerunan linear(135deg, #1e3c72, #2a5298);
warna: #ffffff;
paparan: flex;
flex-direction: lajur; /* Susun kanak-kanak secara menegak /
justify-content: flex-start; / Mulakan dari atas /
align-item: tengah;
ketinggian min: 100vj;
/ Alih keluar limpahan tersembunyi untuk membolehkan keterlihatan pengaki */
limpahan-x: tersembunyi;
}

/* Gaya Bekas /
.bekas {
latar belakang: rgba(255, 255, 255, 0.05);
penapis latar belakang: kabur(10px);
pelapik: 40px;
jejari sempadan: 20px;
penjajaran teks: tengah;
lebar: 90%;
lebar maks: 900px;
bayang-kotak: 0 8px 32px rgba(0, 0, 0, 0.37);
sempadan: 1px rgba pepejal(255, 255, 255, 0.18);
animasi: fadeIn 1s kemudahan-keluar;
lentur: 1; / Benarkan bekas membesar dan tolak pengaki ke bawah */
paparan: flex;
arah lentur: lajur;
align-item: tengah;
}

/* Animasi Fade-in */
@keyframes fadeIn {
daripada { kelegapan: 0; transform: translateY(-20px); }
kepada { kelegapan: 1; transform: translateY(0); }
}

/* Gaya Tajuk */
h1 {
jidar bawah: 30px;
saiz fon: 3rem;
berat fon: 700;
bayang teks: 3px 3px 6px rgba(0,0,0,0.3);
}

/* Bahagian Input */
.bahagian-input {
jidar bawah: 40px;
lebar: 100%;
}

.bahagian input h2 {
jidar bawah: 15px;
saiz fon: 1.75rem;
berat fon: 600;
}

/* Kumpulan Input */
.kumpulan input {
paparan: flex;
justify-content: pusat;
align-item: tengah;
jurang: 10px;
jidar bawah: 15px;
}

.input kumpulan input {
pelapik: 12px 20px;
lebar: 60%;
sempadan: tiada;
jejari sempadan: 30px;
latar belakang: rgba(255, 255, 255, 0.1);
warna: #ffffff;
saiz fon: 1rem;
garis besar: tiada;
peralihan: kemudahan 0.3s latar belakang, kemudahan 0.3s bayang-kotak;
}

.input-kumpulan input::tempat letak {
warna: #dddddd;
}

.input-kumpulan input:fokus {
latar belakang: rgba(255, 255, 255, 0.2);
bayang kotak: 0 0 10px rgba(255, 127, 80, 0.5);
}

.butang kumpulan input {
pelapik: 12px 25px;
sempadan: tiada;
jejari sempadan: 30px;
warna latar belakang: #ff7f50;
warna: #fff;
saiz fon: 1rem;
berat fon: 600;
kursor: penunjuk;
paparan: flex;
align-item: tengah;
jurang: 8px;
peralihan: warna latar belakang mudah 0.3s, mengubah 0.2s mudah, kotak-bayangan mudah 0.3s;
}

.butang kumpulan input:tuding {
warna latar belakang: #ff5722;
transform: translateY(-2px);
bayang kotak: 0 4px 10px rgba(0,0,0,0.3);
}

/* Senarai Pengguna */

senarai pengguna {

}

senarai pengguna 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.

}

/* Hadiah Terpilih */

dipilihHadiah {

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

}

/* Bekas Roda */
.bekas roda {
jawatan: relatif;
jidar bawah: 40px;
lebar: 100%;
paparan: flex;
arah lentur: lajur;
align-item: tengah;
}

.pembalut roda {
jawatan: relatif;
lebar: 100%;
lebar maks: 500px;
jidar: 0 auto 20px;
}

/* Gaya Kanvas */
kanvas {
lebar: 100%;
ketinggian: auto;
jejari sempadan: 50%;
bayang kotak: 0 0 20px rgba(0,0,0,0.5);
latar belakang: #000;
peralihan: ubah 4s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Gaya Penunjuk */
.penunjuk {
jawatan: mutlak;
atas: -20px;
kiri: 50%;
transform: translateX(-50%);
saiz fon: 2rem;
warna: #ffeb3b;
animasi: lantunan 2s tanpa had;
}

@keyframes melantun {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-10px); }
}

/* Butang Pusing */

spinBtn {

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

}

spinBtn:hover {

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

}

spinBtn:aktif {

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;

}

/* Gaya Modal */
.modal {
paparan: tiada;
kedudukan: tetap;
indeks z: 100;
kiri: 0;
atas: 0;
lebar: 100%;
ketinggian: 100%;
limpahan: auto;
warna latar belakang: rgba(0,0,0,0.8);
animasi: fadeInModal 0.5s mudah;
}

@keyframes fadeInModal {
daripada { kelegapan: 0; }
kepada { kelegapan: 1; }
}

.modal-kandungan {
warna latar belakang: rgba(30, 30, 30, 0.95);
margin: 10% auto;
pelapik: 30px;
jejari sempadan: 15px;
lebar: 90%;
lebar maks: 600px;
penjajaran teks: tengah;
bayang kotak: 0 8px 25px rgba(0,0,0,0.5);
jawatan: relatif;
animasi: slaidDown 0.5s mudah;
}

@keyframes slideDown {
daripada { transform: translateY(-50px); kelegapan: 0; }
kepada { transform: translateY(0); kelegapan: 1; }
}

.butang tutup {
warna: #bbb;
jawatan: mutlak;
atas: 15px;
kanan: 20px;
saiz fon: 28px;
berat fon: tebal;
kursor: penunjuk;
peralihan: warna 0.3s mudah;
}

.butang tutup:tuding,
.butang tutup:fokus {
warna: #fff;
}

.modal-kandungan h2 {
jidar bawah: 20px;
saiz fon: 2rem;
berat fon: 700;
}

.modal-kandungan p {
saiz fon: 1.25rem;
jidar bawah: 25px;
}

shareBtn {

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

}

shareBtn:hover {

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

}

/* Gaya Pengaki /
.pengaki {
latar belakang: rgba(255, 255, 255, 0.05);
penapis latar belakang: kabur(10px);
pelapik: 20px 0;
atas sempadan: 1px rgba pepejal(255, 255, 255, 0.2);
lebar: 100%;
/ Pastikan pengaki kekal di bawah kandungan */
lentur-mengecut: 0;
}

.bekas pengaki {
paparan: flex;
arah lentur: lajur;
align-item: tengah;
justify-content: pusat;
lebar maks: 900px;
margin: 0 auto;
pelapik: 0 20px;
}

.pautan pengaki {
paparan: flex;
jurang: 20px;
jidar bawah: 15px;
}

.pautan pengaki ke {
warna: #ffffff;
saiz fon: 1rem;
hiasan teks: tiada;
paparan: flex;
align-item: tengah;
jurang: 8px;
peralihan: warna 0.3s mudah, mengubah 0.2s mudah;
}

.pautan footer a:hover {
warna: #ff7f50;
transform: translateY(-2px);
}

.pautan pengaki a i {
saiz fon: 1.2rem;
}

.footer-derma {
jidar atas: 10px;
}

/* Reka Bentuk Responsif untuk Pengaki */
@media (lebar min: 600px) {
.bekas pengaki {
arah lentur: baris;
justify-content: ruang-antara;
}

}

/* Gaya Bar Tatal untuk Senarai Pengguna */

senarai pengguna::-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.

}

senarai pengguna::-webkit-scrollbar-track {

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

}

senarai pengguna::-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;

}

/* Keadaan Fokus Butang untuk Kebolehcapaian */
.butang kumpulan input:fokus,

spinBtn:fokus,

shareBtn:fokus {

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);

// Memilih Elemen DOM
const addUserBtn = document.getElementById('addUserBtn');
const usernameInput = document.getElementById('username');
const userList = document.getElementById('userList');
const setPrizeBtn = document.getElementById('setPrizeBtn');
const prizeInput = document.getElementById('hadiah');
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');

// Pembolehubah Negeri
biarkan pengguna = [];
biarkan hadiah = "Tiada";
let isSpinning = false;

// Tatarajah Roda
const canvas = document.getElementById('raffleWheel');
const ctx = canvas.getContext('2d');
roda constRadius = kanvas.lebar / 2;
warna const = ['#FF5733', '#33FF57', '#3357FF', '#F333FF', '#FF33A8', '#33FFF6', '#FFC300', '#DAF7A6'];
biarkan startAngle = 0;
biarkan lengkok = 0;

// Mulakan Roda
function initializeWheel() {
if (users.length === 0) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
kembali;
}
arka = (2 * Math.PI) / pengguna.panjang;
drawWheel();
}

// Lukis Roda Cabutan
fungsi drawWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
untuk (biar i = 0; i < pengguna.panjang; i ) {
sudut const = startAngle i * arka;
ctx.fillStyle = warna[i % warna.panjang];
ctx.beginPath();
ctx.moveTo(wheelRadius, wheelRadius);
ctx.arc(wheelradius, wheelradius, wheelradius, sudut, sudut lengkok, palsu);
ctx.closePath();
ctx.fill();

}

// Lukis Anak Panah Penunjuk
fungsi drawPointer() {
const pointerSize = 20;
ctx.fillStyle = '#FFEB3B';
ctx.beginPath();
ctx.moveTo(wheelRadius - pointerSize, 0);
ctx.lineTo(wheelRadius pointerSize, 0);
ctx.lineTo(wheelRadius, -pointerSize * 1.5);
ctx.closePath();
ctx.fill();
}

// Tambah Acara Pengguna
addUserBtn.addEventListener('klik', addUser);
usernameInput.addEventListener('tekan kekunci', (e) => {
if (e.key === 'Enter') addUser();
});

// Berfungsi untuk Menambah Pengguna
function addUser() {
nama pengguna const = usernameInput.value.trim();
jika (nama pengguna === "") {
showAlert("Sila masukkan nama pengguna yang sah.");
kembali;
}
if (users.includes(username)) {
showAlert("Nama pengguna ini telah ditambahkan.");
kembali;
}
users.push(nama pengguna);
updateUserList();
usernameInput.value = '';
initializeWheel();
}

// Kemas kini UI Senarai Pengguna
function updateUserList() {
userList.innerHTML = '';
pengguna.forEach(pengguna => {
const li = document.createElement('li');
li.textContent = pengguna;
userList.appendChild(li);
});
}

// Tetapkan Acara Hadiah
setPrizeBtn.addEventListener('klik', setPrize);
prizeInput.addEventListener('tekan kekunci', (e) => {
if (e.key === 'Enter') setPrize();
});

// Berfungsi untuk Menetapkan Hadiah
fungsi setHadiah() {
const prizeInputValue = prizeInput.value.trim();
if (prizeInputValue === "") {
showAlert("Sila masukkan hadiah yang sah.");
kembali;
}
hadiah = hadiahInputValue;
selectedPrize.textContent = Hadiah Terpilih: ${prize};
prizeInput.value = '';
}

// Acara Butang Pusing
spinBtn.addEventListener('klik', spinWheel);

// Berfungsi untuk Memusing Roda
fungsi spinWheel() {
jika (isSpinning) kembali;
if (users.length === 0) {
showAlert("Sila tambah sekurang-kurangnya seorang pengguna.");
kembali;
}
jika (hadiah === "Tiada") {
showAlert("Sila tetapkan hadiah.");
kembali;
}

}

// Berfungsi untuk Menghentikan Roda dan Mengumumkan Pemenang
fungsi stopRotateWheel() {
darjah const = startAngle * 180 / Math.PI 90;
const arcd = arc * 180 / Math.PI;
indeks const = Math.floor((360 - (darjah % 360)) / arcd) % pengguna.panjang;
pemenang const = pengguna[indeks];
tunjukkanPemenang(pemenang);
isSpinning = palsu;
spinBtn.disabled = palsu;
}

// Fungsi Pelonggaran untuk Animasi Lancar
fungsi easeOut(t, b, c, d) {
t /= d;
t--;
kembalikan c * (t * t * t 1) b;
}

// Berfungsi untuk Memaparkan Makluman
function showAlert(message) {
makluman(mesej);
}

// Berfungsi untuk Menunjukkan Pemenang dalam Modal
function showPemenang(pemenang) {
winnerText.textContent = ${winner} telah memenangi ${prize}! ?;
winnerModal.style.display = "block";
}

// Tutup Acara Modal
closeBtn.addEventListener('klik', () => {
winnerModal.style.display = "tiada";
});
window.addEventListener('klik', (acara) => {
jika (event.target === winnerModal) {
winnerModal.style.display = "tiada";
}
});

// Kongsi di Twitter
shareBtn.addEventListener('klik', shareOnTwitter);

// Fungsi untuk Berkongsi Pemenang di Twitter
fungsi shareOnTwitter() {
const text = encodeURIComponent(? Tahniah kepada ${winnerText.textContent}! Mereka telah memenangi ${hadiah}! ? #Giveaway #Community);
url const = encodeURIComponent('https://gladiatorsbattle.com');
const twitterUrl = https://twitter.com/intent/tweet?text=${text}&url=${url};
window.open(twitterUrl, '_blank');
}

// Persediaan Roda Awal
initializeWheel();

    <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.

Atas ialah kandungan terperinci Membina Roda Cabutan Interaktif Moden dengan HTML, CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!