js, um den Zahlungs-Countdown zu realisieren und zur Startseite zurückzukehren

Zahlungs-Countdown, um zur Startseite zurückzukehren. Falleinführung: Binden Sie mit einfacher JS-Syntax, getElementsByTagName, location.href usw. eine Schaltfläche an die Startseite, um zu einer anderen Seite zu springen.

Hauptseite

Das Wirkungsdiagramm sieht wie folgt aus:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        .Verpackung{
            Hintergrundfarbe: Aquamarin;
            Breite: 300px;
            Höhe: 300px;
            Rand: 0 automatisch;
        }
        h2{
            Textausrichtung: zentriert;
        }
        Taste{
            Textausrichtung: zentriert; 
            Rand links: 68px;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Wrapper">
      <h2>Produkt: Lächeln</h2>
      <h2>Preis: unendlich</h2>
      <h2>Zahlungsmethode: Netto</h2>
      <h2>Bestellnummer:123456789</h2>
      <button>Abbrechen</button>
      <button>Bezahlen</button>
    </div>
 
    <Skript>
        //Logik: Klicken Sie auf die Zahlungsschaltfläche, um zur Seite zu springen. //Holen Sie sich das zweite (das erste ist 0) Tag mit dem Namen „Button“, fügen Sie ein Klickereignis hinzu und binden Sie eine Funktion document.getElementsByTagName('button')[1].onclick = function(){
            //Bestätigungsfeld vor dem Sprung let res = window.confirm('Bitte bestätigen Sie die Zahlung');
            //Beurteile, ob es wahr ist, springe, wenn es wahr ist, if (res) {
                //Verwenden Sie direkt die HTML-Seite im Verzeichnis oder geben Sie andere Website-Links ein location.href = "./return.html"
            }
        }
    </Skript>
</body>
</html>

zurück.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        .Verpackung{
            Breite: 300px;
            Höhe: 400px;
            Rand: 0 automatisch;
        }
        .Inhalt{
            Textausrichtung: zentriert;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Wrapper">
        <div Klasse="Inhalt">
        <h2>Zahlung erfolgreich</h2>
        <span id="countDown">In 10</span> Sekunden zur Startseite zurückkehren<button>Sofort zurückkehren</button>
        </div>
    </div>
 
    <Skript>
        //Logik: Die Seite öffnet sich und der Countdown startet window.onload = function(){
            //Zuerst weise ich let timer = 10 zu;
            //Countdown//Pfeil function()=>{} == function(){}
            setzeIntervall(()=>{
                Timer--;
                document.getElementById('countDown').innerText = Zeitgeber;
                // Zur Startseite springen, wenn der Wert 0 ist if (timer==0) {
                    Standort.href = "./index.html"
                }
            },1000);
        }
        //Klicken Sie auf die Schaltfläche, um sofort zur Startseite zurückzukehrendocument.getElementsByTagName('button')[0].onclick = function(){
            Standort.href = "./index.html"
        }
    </Skript>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Javascript realisiert 10-Sekunden-Countdown zur Bezahlung
Ideen zur Implementierung der AngularJS-Zahlungs-Countdown-Funktion
JavaScript-Implementierung der Alipay-Countdown-Seite und des Codes mit hoher Nachahmung
js zum Erstellen einer Zahlungs-Countdown-Seite
Implementierungsbeispiel für den Countdown einer JS-Zahlungsseite

<<: Eine kurze Diskussion darüber, welche Felder in Mysql für die Indizierung geeignet sind

>>: Beispielcode zur Umsetzung des „Pluszeichen“-Effektes mit CSS