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
Beispielcode für die Entwicklung einer H5-Formularseite basierend auf React-Hooks und der Konfiguration der Zarm-Komponentenbibliothek
Vor kurzem habe ich React Hooks in Kombination mi...
Detaillierte Erklärung der Rolle des neuen Operators in Js
Vorwort Js ist heutzutage die am häufigsten verwe...
So ersetzen Sie alle Tags im HTML-Text
(?i) bedeutet, dass die Groß-/Kleinschreibung nich...
VSCode-Entwicklung UNI-APP Konfigurations-Tutorial und Plugin
Inhaltsverzeichnis Vorne geschrieben Vorsichtsmaß...
Tutorial zum Importieren und Exportieren von Docker-Containern
Hintergrund Die Popularität von Docker hängt eng ...
CSS3 realisiert den leuchtenden Randeffekt
Wirkung der Operation: html <!-- Dieses Elemen...
Beispielcode für die Vue-Bildzuschneidekomponente
Beispiel: Tipp: Diese Komponente basiert auf der ...
Eine Codezeile zeigt Ihnen, wie Sie Linux-Prozesse verbergen
Freunde fragen mich immer, wie man Linux-Prozesse...
Ein Artikel zum Verständnis der Verwendung von Proxys in JavaScript
Inhaltsverzeichnis Was ist ein Agent Grundkenntni...
So installieren und konfigurieren Sie den SSH-Dienst in Ubuntu 18.04
Installieren Sie das SSH-Tool 1. Öffnen Sie das T...
CSS-Tutorial: CSS-Attribut-Medientyp
Eines der wichtigsten Merkmale eines Stylesheets ...
Detaillierte Erklärung zur Begrenzung des Update-/Löschbereichs mit dem MySQL-Parameter sql_safe_updates
Vorwort Wie Sie alle wissen, sind wir bei MySQL-B...
Verwenden von nginx + fastcgi zum Implementieren eines Bilderkennungsservers
Hintergrund Ein spezielles Gerät wird verwendet, ...
Installation und Verwendung der Ubuntu 18.04 Serverversion (Bild und Text)
1 Schritte zur Systeminstallation Betriebssystemv...
Weitergabe von SQL-Optimierungserfahrungen, wenn der Offset beim MySQL-Paging zu groß ist
Finden Sie das Problem Wenn wir den Inhalt in ein...