Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Button muss wenigstens 5 Sekunden gerückt werden.
#1
Question 
Hallo @ all.

Ich finde es toll in eurem Forum, dass keine "blöden" Antworten gegeben werden wie: Google doch mal oder wofür brauchst du das.

Mein Problem ist folgendes:

Gibt es eine Möglichkeit, dass ein User, um einen Bestellvorgang abschließen zu können, den "Bestellen-Knopf" mindestens 5 Sekunden lang drücken muss und dass innerhalb des Knopfes ein eine Counter "Noch 5,4,3,2,1 Sekunden gedrückt halten" erscheint. Das Prinzip sollte wie einer Amazon Bestellung sein, bei dem ein "Schiebeschalter" nach rechts gezogen werden muss. Hier soll es ein Knopf sein, der eben 5 Sekunden lang gerückt werden muss und dabei entweder ein Counter erscheint (innerhalb des Buttons) oder ein Farbbalken von links nach rechts läuft und die Farbe des Buttons verändert (farblich füllt).

Vielen Dank für euer Engagement
Zitieren
#2
Kurze Antwort:
Ja, das geht.

Lange Antwort:
Mir ist kein Tool bekannt, dass dies bewerkstelligt, es sollte aber recht einfach sein, das selber zu implementieren:
1. bei pointerdown über dem Button musst du den "Timer" Starten.
2. bei pointerup über dem Button musst du den Timer stoppen.
3. wenn du den Timer unterbrechen möchtest, wenn jemand im gedrücktem Zustand den Button wieder verlässt musst du den Timer auch bei pointerleave stoppen.
4. während der Timer läuft, musst du die Zeit auf dem Button anzeigen. (Oder eine andere Animation laufen lassen)
5. wenn der Timer eine bestimmte Zeit erreicht, stoppst du ihn wieder und löst das "Kaufen" Event aus (oder etwas anderes, was dann passieren soll.)

So in etwa erreichst du das was du möchtest.
Zitieren
#3
Ja, es ist möglich, einen "Bestellen-Knopf" zu erstellen, der mindestens 5 Sekunden lang gedrückt werden muss, bevor der Bestellvorgang abgeschlossen wird, und dabei einen Countdown oder eine Farbanimation im Button anzeigt. Dies kann mithilfe von HTML, CSS und JavaScript erreicht werden. Brauchst du ein Beispiel?
Zitieren
#4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Countdown</title>
    <style>
        #countdown {
            font-size: 24px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <button id="myButton">Halte mich 5 Sekunden lang gedrückt</button>
    <div id="countdown"></div>

    <script>
        // Globale Variable für den Countdown-Intervall
        let countdownInterval;

        // Referenzen zu DOM-Elementen abrufen
        const button = document.getElementById('myButton');
        const countdownDiv = document.getElementById('countdown');

        // Eventlistener für das Drücken des Buttons hinzufügen
        button.addEventListener('mousedown', startCountdown);
        button.addEventListener('mouseup', stopCountdown);

        function startCountdown() {
            // Setze den Countdown auf 5
            let countdown = 5;

            // Aktualisiere das Countdown-Div
            updateCountdown();

            // Starte das Intervall für den Countdown
            countdownInterval = setInterval(() => {
                countdown--;

                // Wenn der Countdown 0 erreicht hat, zeige die Nachricht an
                if (countdown === 0) {
                    showMessage();
                    stopCountdown();
                } else {
                    updateCountdown();
                }
            }, 1000);
        }

        function stopCountdown() {
            // Beende das Intervall
            clearInterval(countdownInterval);

            // Setze das Countdown-Div zurück
            countdownDiv.textContent = '';
        }

        function updateCountdown() {
            countdownDiv.textContent = `Countdown: ${countdown}s`;
        }

        function showMessage() {
            alert('Nachricht nach 5 Sekunden!');
        }
    </script>
</body>
</html>
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste