Javascript realisiert 10-Sekunden-Countdown zur Bezahlung
|
In diesem Artikel wird der spezifische Code von Javascript zur Realisierung des 10-Sekunden-Countdowns der Zahlung zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Das Wirkungsdiagramm sieht wie folgt aus:
Dieser Fall ist eigentlich sehr einfach. Solange Sie die Onclick -Funktion in den Grundlagen von js und die Verwendung von Timern beherrschen, können Sie schnell einen solchen Effekt erzielen. Schauen wir uns an, wie es geht ~ Zunächst benötigen Sie zwei HTML-Dateien. Verwenden Sie HTML und CSS, um die ersten Seiteneffekte in die beiden Dateien zu schreiben. Ich werde hier nicht ins Detail gehen. Einzelheiten finden Sie im folgenden Code Lassen Sie uns über die Effekte sprechen, die js erzielen muss: 1. Klicken Sie auf Seite 1 auf Bezahlen, um zu einer anderen Datei zu springen Dies ist der Effekt, den wir erzielen müssen Wie springen wir also zwischen zwei Seiten? => Verwenden Sie Der Timing-Effekt ist sehr einfach. Verwenden Sie einfach Der Code lautet wie folgt: Seite 1:
<!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>
#btn{
Anzeige: Block;
Rand: 130px automatisch;
Breite: 300px;
Höhe: 100px;
Schriftgröße: 30px;
}
</Stil>
</Kopf>
<Text>
<button id="btn">Bezahlen</button>
<Skript>
let btn = document.getElementById("btn");
btn.onclick=Funktion(){
let con = window.confirm("Sind Sie sicher?");
wenn(con){
Standort.href='./Zahlung.html';
}
}
</Skript>
</body>
</html>Seite 2:
<!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>
#spa {
Schriftgröße: 20px;
Farbe: rot;
}
#gesamt {
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: rgba(169, 169, 169, 0,315);
Rand: 40px automatisch;
Rahmenradius: 20px;
Polsterung: 20px;
Position: biegen;
Flex-Richtung: Spalte;
Textausrichtung: zentriert;
}
#gesamt h3 {
Polsterung oben: 20px;
}
#Gesamtschaltfläche {
Rand oben: 30px
}
</Stil>
</Kopf>
<Text>
<div id="gesamt">
<h3>Herzlichen Glückwunsch, Ihre Zahlung war erfolgreich! </h3>
<div>
<span id="spa">10</span>
<span>Nach Sekunden automatisch zur Startseite zurückkehren</span>
</div>
<button id="btn">Jetzt zurückgeben</button>
</div>
<Skript>
var spa = document.getElementById("spa");
sei t = 10;
setzeIntervall(() => {
T--;
spa.innerText = t;
wenn (t == 0) {
location.href = "./zahle 10 Sekunden.html";
}
}, 400);
var btn = document.getElementById("btn");
btn.onclick=Funktion(){
location.href="./Zahle 10 Sekunden.html" rel="externes Nofollow"
}
</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:
|
Artikel empfehlen
So verwenden Sie TypeScript in Vue
Einführung In den letzten Jahren wurde der Ruf na...
So erstellen Sie einen vollständigen Samba-Server unter Linux (CentOS-Version)
Vorwort smb ist der Name eines Protokolls, das fü...
Beispiel zum Deaktivieren der Browser-Cache-Konfiguration im Vue-Projekt
Beim Freigeben eines Projekts müssen Sie häufig d...
Praxis des El-Cascader-Kaskadenselektors in ElementUI
Inhaltsverzeichnis 1. Wirkung 2. Hauptcode 1. Wir...
Wenden Sie „Provide“ und „Inject“ an, um die Vue-Seitenmethode zu aktualisieren
Inhaltsverzeichnis Methode 1: Rufen Sie die Funkt...
Zusammenfassung gängiger Befehle zur Linux-Benutzer- und Gruppenverwaltung
Dieser Artikel fasst die allgemeinen Befehle zur ...
Der Unterschied zwischen HTML, XHTML und XML
Entwicklungstrends: html (Hypertext-Markup-Sprache...
Methodenbeispiel zum sicheren Abrufen tiefer Objekte von Object in Js
Inhaltsverzeichnis Vorwort Text Parameter Beispie...
So entwickeln Sie Uniapp mit vscode
Da ich immer vscode zur Entwicklung von Front-End...
Einfache Implementierung der Handheld-Sperrfeuerfunktion + Textschüttel-Spezialeffektcode basierend auf JS
Vor einiger Zeit gab es auf TikTok eine Schüttela...
So löschen Sie Ordner, Dateien und Dekomprimierungsbefehle auf Linux-Servern
1. Ordner löschen Beispiel: rm -rf /usr/java Das ...
Detaillierte Erläuterung der einfachen Verwendung des MySQL-Abfragecaches
Inhaltsverzeichnis 1. Implementierungsprozess des...
Implementierung der Bereitstellung des Nginx+ModSecurity-Sicherheitsmoduls
Inhaltsverzeichnis 1. Herunterladen 2. Bereitstel...
Unity stellt eine Verbindung zu MySQL her und liest den Implementierungscode der Tabellendaten
Die Tabelle sieht wie folgt aus: Code, wenn Unity...
SSM implementiert die Chiffretext-Anmeldefunktion für das Kennwort des MySQL-Datenbankkontos
Einführung Unser Unternehmen ist an der Forschung...