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 LibreOffice zum Konvertieren von Dokumentformaten unter CentOS
Die Projektanforderungen erfordern eine gewisse V...
Zusammenfassung von 28 gängigen JavaScript-String-Methoden und Verwendungstipps
Inhaltsverzeichnis Vorwort 1. Ermitteln Sie die L...
Detaillierte Erläuterung der besten Konfiguration für Nginx zur Verbesserung von Sicherheit und Leistung
Es zeigt hauptsächlich, wie X-Frame-Options, X-XS...
Lösung für 1067, wenn Mysql in Windows startet
Ich habe erst vor ein paar Tagen mit der Arbeit b...
Installation und Verwendung von Vue
Inhaltsverzeichnis 1. Vue-Installation Methode 1:...
Beschreibung der Grenzen und Bereiche zwischen MySQL
MySQL zwischen Grenzbereich Der Bereich zwischen ...
Detaillierte Erklärung der Vuex-Umgebung
Inhaltsverzeichnis Erstellen Sie eine Vuex-Umgebu...
Zwei Methoden zum Wiederherstellen von MySQL-Daten
1. Einleitung Vor einiger Zeit gab es eine Reihe ...
9 Möglichkeiten zum Ein- und Ausblenden von CSS-Elementen
Bei der Erstellung von Webseiten ist das Anzeigen...
Detaillierte Erläuterung des Prozesses zur Behebung der Ursache für hohe CPU-Auslastung unter Linux
Inhaltsverzeichnis Vorwort Start Schritt Fehlerbe...
MySql implementiert die Seitenabfragefunktion
Zunächst müssen wir klarstellen, warum wir pagini...
So schreiben Sie hochwertigen JavaScript-Code
Inhaltsverzeichnis 1. Einfach zu lesender Code 1....
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15
In diesem Artikel wird die Installations- und Kon...
Mehrere Möglichkeiten zum Speichern von Bildern in einer MySQL-Datenbank
Normalerweise müssen die von Benutzern hochgelade...
Einige Möglichkeiten zum Eliminieren doppelter Zeilen in MySQL
SQL-Anweisung /* Einige Methoden zum Eliminieren ...