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
Zusammenfassung der in MySQL häufig verwendeten Verkettungsanweisungen
Vorwort: In MySQL wird die Funktion CONCAT() verw...
So verhindern Sie doppelte Übermittlungen in einem JQuery-Projekt
In neuen Projekten kann Axios doppelte Übermittlu...
Einfache Implementierung von Vue Drag & Drop
In diesem Artikel wird hauptsächlich die einfache...
So integrieren Sie Bilder eleganter in Vue-Seiten
Inhaltsverzeichnis Fehlerdemonstration Durch bere...
MySQL 8.0.20 Installations-Tutorial und ausführliches Tutorial zu Installationsproblemen
Ursprüngliche Adresse: https://blog.csdn.net/m0_4...
Zusammenfassung zum Erlernen von Docker-Befehlen in einem Artikel
Inhaltsverzeichnis Einführung Spiegel-Repository ...
Grundlegende Schritte zur Sicherheitseinstellung für den CentOS7-Server
Schalten Sie den Ping-Scan aus, obwohl dies nicht...
So konfigurieren Sie Nginx, um zwischen dem PC- oder Mobiltelefonzugriff auf verschiedene Domänennamen zu unterscheiden
Die neue offizielle Website ist online, aber die ...
Implementierung von React-Loop-Daten (Liste)
Lassen Sie uns zunächst die Daten simulieren, die...
HTML-Tutorial, leicht zu erlernende HTML-Sprache (2)
*******************Einführung in die HTML-Sprache ...
Analyse der problematischen „Aborted“-Warnung in MySQL anhand von Fallstudien
Dieser Artikel stellt hauptsächlich den relevante...
JS implementiert ein zufälliges Namensaufrufsystem
Verwenden Sie JS, um ein zufälliges Namensaufrufs...
Vorteile von INSERT INTO SET in MySQL
Daten in MySQL-Datenbank einfügen. Bisher häufig ...
Detaillierte Erläuterung der Platzhalter für die Webentwicklung in JS-Zeichenfolgenverkettung und der Conlose-Objekt-API
Inhaltsverzeichnis Platzhalter-Ersetzung Konsolen...
Reines CSS3 zum Erstellen eines Beispielcodes für Seitenwechseleffekte
Das, was ich vorher geschrieben habe, ist zu komp...