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:
|
<<: Eine kurze Diskussion darüber, welche Felder in Mysql für die Indizierung geeignet sind
>>: Beispielcode zur Umsetzung des „Pluszeichen“-Effektes mit CSS
Artikel empfehlen
Halbtransparente Bildverarbeitung. Ideen und Code zur Implementierung von halbtransparentem Hintergrund.
Code kopieren Der Code lautet wie folgt: <!DOC...
Website User Experience Design (UE)
Ich habe gerade einen von JunChen verfassten Beitr...
Reflexion und Proxy in Front-End-JavaScript
Inhaltsverzeichnis 1. Was ist Reflexion? 2. Refle...
So fügen Sie eine Popup-Aktionsschaltfläche unten für „Select“ und „Cascader“ von Element-UI hinzu
Wie in der folgenden Abbildung dargestellt, ist e...
Der MySQL-Tagesstatistikbericht trägt 0 ein, wenn für diesen Tag keine Daten vorliegen
1. Reproduktion des Problems: Zählen Sie die Gesa...
Tipps zur Verwendung des Top-Befehls in Linux
Lassen Sie mich zunächst die Bedeutung einiger Fe...
MySQL 8.0 kann jetzt JSON verarbeiten
Inhaltsverzeichnis 1. Kurzübersicht 2. JSON-Grund...
HTML verwendet Formular-Tags, um den Beispielcode der Registrierungsseite zu implementieren
Fallbeschreibung: - Verwenden Sie Tabellen, um Se...
MySQL-Tabellenfeld Zeiteinstellung Standardwert
Anwendungsszenario In der Datentabelle muss die A...
Zusammenfassung zum Erlernen von HTML-Tags und Grundelementen
1. Elemente und Tags in HTML <br />Ein Elem...
Implementierung der Bereitstellung des Apollo-Konfigurationscenters mithilfe von Docker in CentOS7
Apollo Open Source-Adresse: https://github.com/ct...
Implementierung einer Lösung für adaptive Textbereichshöhe in Vue
Inhaltsverzeichnis Versteckte Probleme Lösung zur...
Beispielcode zur Implementierung einer Sternenhimmelanimation mit CSS3 Advanced LESS
In diesem Artikel wird der Beispielcode für erwei...
Lösen Sie das Problem des Mac Docker x509-Zertifikats
Frage Kürzlich musste ich mich bei einem privaten...
SQL Left Join und Right Join - Prinzip und Beispielanalyse
Es gibt zwei Tabellen, und die Datensätze in Tabe...