Login

Kreml16 · 26.08.2023, 10:09

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

AndreasB · 26.08.2023, 10:37

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.

JackViper · 13.10.2023, 14:38

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?

***rzscout*** · 14.10.2023, 15:31

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>

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken