Erstellen eines modernen interaktiven Gewinnspielrads mit HTML, CSS und JavaScript

Einführung

Im heutigen digitalen Zeitalter ist die Einbindung Ihrer Community mit interaktiven Tools von entscheidender Bedeutung, um Beteiligung und Begeisterung zu fördern. Unabhängig davon, ob Sie ein Gewinnspiel veranstalten, eine Umfrage durchführen oder einen Wettbewerb organisieren, kann ein optisch ansprechendes und interaktives Gewinnspielrad das Benutzererlebnis erheblich verbessern. In diesem Artikel begleite ich Sie durch den Prozess der Erstellung von Modern Raffle 2024, einem interaktiven Gewinnspielrad, das mit HTML, CSS und erstellt wurde JavaScript. Wir decken alles ab, von der Einrichtung der Struktur über das Hinzufügen von Animationen bis hin zur Integration von Social-Sharing-Funktionen.

? Verwendete Technologien

Um dieses Projekt zum Leben zu erwecken, habe ich die folgenden Technologien genutzt:

• HTML5: Zur Strukturierung der Webseite und zum Erstellen interaktiver Elemente.
• CSS3: Um die Anwendung mit modernen Designprinzipien zu gestalten, einschließlich Glasmorphismus, Animationen und responsiven Layouts.
• JavaScript: Um Interaktivität hinzuzufügen, Benutzereingaben zu verarbeiten und die Logik und Animationen des Gewinnspielrads zu verwalten.
• Canvas API: Zum Zeichnen und Animieren des Gewinnspielrads.
• Font Awesome: Zum Einbinden von Vektorsymbolen für einen eleganten Look.
• Google Fonts: Verwendet die Schriftart Inter für eine klare und moderne Typografie.
• Kauf mir einen Kaffee: Ein Spenden-Button wurde integriert, um das Projekt zu unterstützen.

?️ Projektstruktur

Das Projekt ist in drei Hauptdateien unterteilt:

1. index.html: Enthält die HTML-Struktur der Anwendung.
2. styles.css: Enthält alle CSS-Stile für Layout und Design.
3. script.js: Enthält den JavaScript-Code, der die Interaktivität und Animationen ermöglicht.

Zusätzlich ist ein Abschnitt Fußzeile integriert, um für meine Website, LinkedIn und Twitter zu werben, und enthält eine Schaltfläche Kauf mir einen Kaffee zur Unterstützung.

? HTML (index.html)

Die HTML-Struktur richtet die Hauptkomponenten der Tombola-Anwendung ein, darunter Eingabebereiche für Teilnehmer und Preise, das Tombola-Rad, ein Modal für die Bekanntgabe von Gewinnern und eine Fußzeile für Werbeaktionen.

html

? Moderne Verlosung 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.

/* Zurücksetzen und Basisstile */

• { Boxgröße: border-box; Rand: 0; Polsterung: 0; Schriftfamilie: „Inter“, serifenlos; }

Körper {
Hintergrund: linear-gradient(135deg, #1e3c72, #2a5298);
Farbe: #ffffff;
Anzeige: Flex;
Flexrichtung: Spalte; /* Untergeordnete Elemente vertikal stapeln /
rechtfertigen-Inhalt: Flex-Start; /Beginnen Sie von oben /
align-items: center;
Mindesthöhe: 100 Vh;
/Entfernen Sie den ausgeblendeten Überlauf, um die Sichtbarkeit der Fußzeile zu ermöglichen */
overflow-x: versteckt;
}

/* Containerstile /
.container {
Hintergrund: rgba(255, 255, 255, 0,05);
Hintergrundfilter: Unschärfe (10 Pixel);
Polsterung: 40px;
Randradius: 20px;
text-align: center;
Breite: 90 %;
maximale Breite: 900px;
Box-Shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
Rand: 1px solid rgba(255, 255, 255, 0.18);
Animation: fadeIn 1s easy-in-out;
Flex: 1; / Container wachsen lassen und Fußzeile nach unten drücken */
Anzeige: Flex;
Flexrichtung: Spalte;
align-items: center;
}

/* Einblendanimation */
@keyframes fadeIn {
von { Deckkraft: 0; transform: TranslateY(-20px); }
zu { Deckkraft: 1; transform: TranslateY(0); }
}

/* Überschriftenstile */
h1 {
Rand unten: 30px;
Schriftgröße: 3rem;
Schriftstärke: 700;
Textschatten: 3px 3px 6px rgba(0,0,0,0.3);
}

/* Eingabeabschnitte */
.Eingabeabschnitt {
Rand unten: 40px;
Breite: 100 %;
}

.input-section h2 {
Rand unten: 15px;
Schriftgröße: 1,75rem;
Schriftstärke: 600;
}

/* Eingabegruppen */
.input-group {
Anzeige: Flex;
justify-content: center;
align-items: center;
Lücke: 10px;
Rand unten: 15px;
}

.input-group input {
Polsterung: 12px 20px;
Breite: 60 %;
Grenze: keine;
Randradius: 30px;
Hintergrund: rgba(255, 255, 255, 0.1);
Farbe: #ffffff;
Schriftgröße: 1rem;
Gliederung: keine;
Übergang: Hintergrund 0,3 s Leichtigkeit, Box-Schatten 0,3 s Leichtigkeit;
}

.input-group input::placeholder {
Farbe: #dddddd;
}

.input-group input:focus {
Hintergrund: rgba(255, 255, 255, 0,2);
box-shadow: 0 0 10px rgba(255, 127, 80, 0.5);
}

.Eingabegruppenschaltfläche {
Polsterung: 12px 25px;
Grenze: keine;
Randradius: 30px;
Hintergrundfarbe: #ff7f50;
Farbe: #fff;
Schriftgröße: 1rem;
Schriftstärke: 600;
Cursor: Zeiger;
Anzeige: Flex;
align-items: center;
Lücke: 8px;
Übergang: Hintergrundfarbe 0,3 s Leichtigkeit, Transformation 0,2 s Leichtigkeit, Box-Schatten 0,3 s Leichtigkeit;
}

.input-group button:hover {
Hintergrundfarbe: #ff5722;
transform: TranslateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Benutzerliste */

Benutzerliste {

}

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

}

/* Ausgewählter Preis */

selectedPrize {

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

}

/* Radbehälter */
.wheel-container {
Position: relativ;
Rand unten: 40px;
Breite: 100 %;
Anzeige: Flex;
Flexrichtung: Spalte;
align-items: center;
}

.wheel-wrapper {
Position: relativ;
Breite: 100 %;
maximale Breite: 500px;
Rand: 0 automatisch 20px;
}

/* Canvas-Stile */
Leinwand {
Breite: 100 %;
Höhe: automatisch;
Randradius: 50 %;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
Hintergrund: #000;
Übergang: 4s kubisch-bezier(0,33, 1, 0,68, 1) transformieren;
}

/* Zeigerstile */
.pointer {
Position: absolut;
oben: -20px;
übrig: 50 %;
transform: TranslateX(-50%);
Schriftgröße: 2rem;
Farbe: #ffeb3b;
Animation: Bounce 2s unendlich;
}

@keyframes springen {
0 %, 100 % { transform: TranslateX(-50%) TranslateY(0); }
50% { transform: TranslateX(-50%) TranslateY(-10px); }
}

/* Drehknopf */

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:active {

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;

}

/* Modale Stile */
.modal {
Anzeige: keine;
Position: fest;
Z-Index: 100;
links: 0;
oben: 0;
Breite: 100 %;
Höhe: 100 %;
Überlauf: automatisch;
Hintergrundfarbe: rgba(0,0,0,0.8);
Animation: fadeInModal 0,5s Leichtigkeit;
}

@keyframes fadeInModal {
von { Deckkraft: 0; }
zu { Deckkraft: 1; }
}

.modal-content {
Hintergrundfarbe: rgba(30, 30, 30, 0,95);
Marge: 10 % automatisch;
Polsterung: 30px;
Randradius: 15px;
Breite: 90 %;
maximale Breite: 600px;
text-align: center;
box-shadow: 0 8px 25px rgba(0,0,0,0.5);
Position: relativ;
Animation: slideDown 0,5 s Leichtigkeit;
}

@keyframes slideDown {
from { transform: translatorY(-50px); Deckkraft: 0; }
zu { transform: translatorY(0); Deckkraft: 1; }
}

.close-button {
Farbe: #bbb;
Position: absolut;
oben: 15px;
rechts: 20px;
Schriftgröße: 28px;
Schriftstärke: fett;
Cursor: Zeiger;
Übergang: Farbe 0,3 Sekunden Leichtigkeit;
}

.close-button:hover,
.close-button:focus {
Farbe: #fff;
}

.modal-content h2 {
Rand unten: 20px;
Schriftgröße: 2rem;
Schriftstärke: 700;
}

.modal-content p {
Schriftgröße: 1,25rem;
Rand unten: 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);

}

/* Fußzeilenstile /
.footer {
Hintergrund: rgba(255, 255, 255, 0,05);
Hintergrundfilter: Unschärfe (10 Pixel);
Polsterung: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
Breite: 100 %;
/Stellen Sie sicher, dass die Fußzeile unter dem Inhalt bleibt */
Flex-Schrumpf: 0;
}

.footer-container {
Anzeige: Flex;
Flexrichtung: Spalte;
align-items: center;
justify-content: center;
maximale Breite: 900px;
Rand: 0 automatisch;
Polsterung: 0 20px;
}

.footer-links {
Anzeige: Flex;
Lücke: 20px;
Rand unten: 15px;
}

.footer-links a {
Farbe: #ffffff;
Schriftgröße: 1rem;
Textdekoration: keine;
Anzeige: Flex;
align-items: center;
Lücke: 8px;
Übergang: Farbe 0,3 Sekunden, Transformation 0,2 Sekunden;
}

.footer-links a:hover {
Farbe: #ff7f50;
transform: TranslateY(-2px);
}

.footer-links a i {
Schriftgröße: 1.2rem;
}

.footer-donate {
Rand oben: 10px;
}

/* Responsives Design für Fußzeile */
@media (Mindestbreite: 600 Pixel) {
.footer-container {
Flex-Richtung: Reihe;
justify-content: space-between;
}

}

/* Scrollbar-Stile für Benutzerliste */

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;

}

/* Schaltflächenfokuszustände für Barrierefreiheit */
.input-group button:focus,

spinBtn:fokus,

shareBtn:focus {

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

// Auswählen von DOM-Elementen
const addUserBtn = document.getElementById('addUserBtn');
const usernameInput = document.getElementById('username');
const userList = document.getElementById('userList');
const setPrizeBtn = document.getElementById('setPrizeBtn');
const awardInput = document.getElementById('prize');
const selectedPrize = document.getElementById('selectedPrize');
const spinBtn = document.getElementById('spinBtn');
const wonnerModal = document.getElementById('winnerModal');
const closeBtn = document.querySelector('.close-button');
const wonnerText = document.getElementById('winnerText');
const shareBtn = document.getElementById('shareBtn');

// Zustandsvariablen
letuser = [];
let award = "None";
let isSpinning = false;

// Radkonfiguration
const canvas = document.getElementById('raffleWheel');
const ctx = canvas.getContext('2d');
const WheelRadius = canvas.width / 2;
const farben = ['#FF5733', '#33FF57', '#3357FF', '#F333FF', '#FF33A8', '#33FFF6', '#FFC300', '#DAF7A6'];
let startAngle = 0;
sei arc = 0;

// Rad initialisieren
Funktion initializeWheel() {
if (users.length === 0) {
ctx.clearRect(0, 0, Canvas.width, Canvas.height);
zurück;
}
arc = (2 * Math.PI) / user.length;
drawWheel();
}

// Zeichne das Gewinnspielrad
Funktion drawWheel() {
ctx.clearRect(0, 0, Canvas.width, Canvas.height);
for (let i = 0; i < users.length; i ) {
const angle = startAngle i * arc;
ctx.fillStyle = farben[i % farben.länge];
ctx.beginPath();
ctx.moveTo(wheelRadius,wheelRadius);
ctx.arc(wheelRadius,wheelRadius,wheelRadius, angle, angle arc, false);
ctx.closePath();
ctx.fill();

}

// Zeichne den Zeigerpfeil
Funktion 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();
}

// Benutzerereignis hinzufügen
addUserBtn.addEventListener('click', addUser);
usernameInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addUser();
});

// Funktion zum Hinzufügen eines Benutzers
Funktion addUser() {
const username = usernameInput.value.trim();
if (Benutzername === "") {
showAlert("Bitte geben Sie einen gültigen Benutzernamen ein.");
zurück;
}
if (users.includes(username)) {
showAlert("Dieser Benutzername wurde bereits hinzugefügt.");
zurück;
}
users.push(Benutzername);
updateUserList();
usernameInput.value = '';
initializeWheel();
}

// Benutzerlisten-Benutzeroberfläche aktualisieren
Funktion updateUserList() {
userList.innerHTML = '';
users.forEach(user => {
const li = document.createElement('li');
li.textContent = user;
userList.appendChild(li);
});
}

// Preisereignis festlegen
setPrizeBtn.addEventListener('click', setPrize);
PrizeInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') setPrize();
});

// Funktion zum Festlegen des Preises
Funktion setPrize() {
const awardInputValue = awardInput.value.trim();
if (prizeInputValue === "") {
showAlert("Bitte geben Sie einen gültigen Preis ein.");
zurück;
}
award = awardInputValue;
selectedPrize.textContent = Ausgewählter Preis: ${prize};
awardInput.value = '';
}

// Spin-Button-Ereignis
spinBtn.addEventListener('click', spinWheel);

// Funktion zum Drehen des Rades
Funktion spinWheel() {
if (isSpinning) return;
if (users.length === 0) {
showAlert("Bitte fügen Sie mindestens einen Benutzer hinzu.");
zurück;
}
if (prize === „None“) {
showAlert("Bitte legen Sie einen Preis fest.");
zurück;
}

}

// Funktion zum Stoppen des Rades und Bekanntgabe des Gewinners
Funktion stopRotateWheel() {
constdegrees = startAngle * 180 / Math.PI 90;
const arcd = arc * 180 / Math.PI;
const index = Math.floor((360 - (Grad % 360)) / arcd) %user.length;
const Gewinner = Benutzer[Index];
showWinner(Gewinner);
isSpinning = false;
spinBtn.disabled = false;
}

// Beschleunigungsfunktion für flüssige Animationen
Funktion easyOut(t, b, c, d) {
t /= d;
t--;
return c * (t * t * t 1) b;
}

// Funktion zum Anzeigen von Warnungen
Funktion showAlert(message) {
Warnung(Nachricht);
}

// Funktion zum Anzeigen des Gewinners in Modal
Funktion showWinner(Gewinner) {
wongerText.textContent = ${winner} hat ${prize} gewonnen! ?;
wongerModal.style.display = "block";
}

// Modale Ereignisse schließen
closeBtn.addEventListener('click', () => {
wonnerModal.style.display = "none";
});
window.addEventListener('click', (event) => {
if (event.target === wongerModal) {
wonnerModal.style.display = "none";
}
});

// Auf Twitter teilen
shareBtn.addEventListener('click', shareOnTwitter);

// Funktion zum Teilen des Gewinners auf Twitter
Funktion shareOnTwitter() {
const text = encodeURIComponent(? Herzlichen Glückwunsch an ${winnerText.textContent}! Sie haben ${prize} gewonnen! ? #Giveaway #Community);
const url = encodeURIComponent('https://gladiatorsbattle.com');
const twitterUrl = https://twitter.com/intent/tweet?text=${text}&url=${url};
window.open(twitterUrl, '_blank');
}

// Ersteinrichtung des Rades
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.

Das obige ist der detaillierte Inhalt vonErstellen eines modernen interaktiven Gewinnspielrads mit HTML, CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!