JavaScript zum Implementieren einer zeitlich begrenzten Flash-Sale-Funktion
|
In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung der zeitlich begrenzten Flash-Sale-Funktion zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
</Kopf>
<Text>
<div Klasse="Box">
<div id="d"></div> <!-- Verbleibende Tage -->
<div id="h"></div> <!-- Verbleibende Stunden -->
<div id="m"></div> <!-- Verbleibende Minuten -->
<div id="s"></div> <!-- Verbleibende Sekunden -->
</div>
<Skript>
//Endzeit des Flash-Sales festlegen var endTime = new Date('2021-10-22 18:51:59'), endSeconds = endTime.getTime();
//Variablen zum Speichern der verbleibenden Zeit definieren var d = h = m = s = 0;
//Stellen Sie den Timer ein, um den zeitlich begrenzten zweiten Kill-Effekt zu erzielen. var id = setInterval(seckill,1000);
Funktion seckill(){
var nowTime = new Date(); //Aktuelle Uhrzeit abrufen //Zeitunterschied in Sekunden abrufen var remainder = parseInt((endSeconds - nowTime.getTime())/1000);
if(remaining>0){//Beurteilen, ob der Flash-Sale abgelaufen ist//Verbleibende Tage berechnen (durch 60*60*24 teilen und aufrunden, um die verbleibenden Tage zu erhalten)
d = parseInt (restlich / 86400);
// Berechnen Sie die verbleibenden Stunden (dividieren Sie durch 60*60, um in Stunden umzurechnen, modulo 24 Stunden, um die verbleibenden Stunden zu erhalten)
h = parseInt((restlich / 3600) % 24);
//Berechnen Sie die verbleibenden Minuten (dividieren Sie durch 60, um die Minuten zu erhalten, Modulo 60, um die verbleibenden Minuten zu erhalten)
m=parseInt((restlich / 60) % 60);
//Berechnen Sie die verbleibenden Sekunden (Modulo 60, um die verbleibenden Sekunden zu erhalten)
s = parseInt (verbleibende % 60);
//Verwenden Sie zwei Ziffern, um die verbleibenden Tage, Stunden, Minuten und Sekunden darzustellen d = d<10 ? '0' + d : d;
h = h<10 ? '0' + h : h;
m = m<10 ? '0' + m : m;
s = s<10 ? '0' + s : s;
}anders{
clearInterval(id); //Zweiter Verkauf abgelaufen, Timer abbrechen d = h = m = s ='00';
}
//Zeige die verbleibenden Tage, Stunden, Minuten und Sekunden bis zur angegebenen Webseite an. document.getElementById('d').innerHTML = d + 'days';
document.getElementById('h').innerHTML = h + 'Nicht';
document.getElementById('m').innerHTML = m + 'Nein';
document.getElementById('s').innerHTML = s + 'Sekunden';
}
</Skript>
</body>
</html>
Ich möchte Ihnen ein einfaches Beispiel für einen zeitlich begrenzten Flash-Sale mit JS zeigen:
<!DOCTYPE html>
<html>
<head lang="de">
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
.product{ Rahmen: 3px durchgehend orange; Anzeige: Inline-Block; linker Rand: 400px; Breite: 400px; }
.red{ Farbe: rot; Schriftgröße: 25px; }
</Stil>
</Kopf>
<Text>
<div Klasse="Produkt" Stil="Textausrichtung: Mitte;">
<img src="jquery case-blinds/images/0.jpg" alt="" width="150"/>
<p>Ein perfekter Mann</p>
<span>Ursprünglicher Preis: <del>9,9 Milliarden</del></span>
<br/>
<span>Aktueller Preis: <span class="red">100 Yuan</span></span>
<br/>
<span>Der Verkauf endet in:</span><span id="time"></span>
</div>
<Skript>
var stopTime = neues Datum (3000,11,14,0,0,0);
var jetztZeit = neues Datum();
var jianGe = (Stoppzeit - aktuelle Zeit)/1000;
var Tag = Math.floor(jianGe/60/60/24);
var Stunde = Math.floor(jianGe/60/60%24);
var min = Math.floor(jianGe/60%60);
var sec = Math.floor(jianGe%60);
var showTime = Tag+'Tag'+Stunde+'Stunde'+Min+'Minute'+Sek+'Sekunde';
document.getElementById('time').innerText = Zeit anzeigen;
//Timer: wie oft eine Funktion ausgeführt wird //setInterval(func,ms)
var Timer = Intervall festlegen(Funktion () {
var jetztZeit = neues Datum();
var jianGe = (Stoppzeit - aktuelle Zeit)/1000;
var Tag = Math.floor(jianGe/60/60/24);
var Stunde = Math.floor(jianGe/60/60%24);
var min = Math.floor(jianGe/60%60);
var sec = Math.floor(jianGe%60);
var showTime = Tag+'Tag'+Stunde+'Stunde'+Min+'Minute'+Sek+'Sekunde';
document.getElementById('time').innerText = Zeit anzeigen;
wenn(Tag==0&&Stunde==0&&Min==0&&Sek==0){
//Schalte den Timer aus clearInterval(timer);
}
},1000);
</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:
|
<<: Detaillierte Erklärung zum Erstellen mehrerer Instanzen von MySQL 5.6 in einer CentOS7-Umgebung
>>: So verwenden Sie iostat zum Anzeigen der IO-Leistung von Linux-Festplatten
Artikel empfehlen
Lösung für das Problem, dass MySQL nach dem Ändern des Standardpfads der Datenbank nicht gestartet werden kann
Vorwort Als MySQL den Standarddatenbankpfad änder...
js-Version zur Realisierung der Rechnerfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Tutorial zum schnellen Bereitstellen eines Nebula Graph-Clusters mit Docker Swarm
1. Einleitung In diesem Artikel wird beschrieben,...
MySQL Installations-Tutorial unter Windows mit Bildern und Text
Anweisungen zur MySQL-Installation MySQL ist ein ...
So verwenden Sie Docker zum Bereitstellen eines Dubbo-Projekts
1. Verwenden Sie zunächst Springboot, um ein einf...
Neue Blockbereichsfunktion von JavaScript ES
Inhaltsverzeichnis 1. Was ist Blockbereich? 2. Wa...
37 Tipps für ein gutes User Interface Design (mit Bildern)
1. Versuchen Sie, ein einspaltiges statt eines meh...
Stellen Sie die Grafana+Prometheus-Konfiguration mit Docker bereit
docker-compose-monitor.yml Version: '2' N...
So verwenden Sie vue.js zum Implementieren der Drag & Drop-Funktion
Vorwort Durch das Hinzufügen einer Drag & Dro...
Zusammenfassung der neuen Verwendung von vi (vim) unter Linux
Ich benutze den vi-Editor seit mehreren Jahren, h...
Mehrere magische Verwendungen des JS ES6 Spread-Operators
Inhaltsverzeichnis 1. Attribute hinzufügen 2. Meh...
So erlauben Sie den Remotezugriff auf offene Ports in Linux
1. Ändern Sie die Firewall-Konfigurationsdatei # ...
Ein Artikel zum Verständnis der erweiterten Funktionen von K8S
Inhaltsverzeichnis Erweiterte Funktionen des K8S ...
Schritte zum Aktivieren des MySQL-Datenbanküberwachungs-Binlogs
Vorwort Wir müssen häufig etwas basierend auf bes...
So benennen Sie die Tabelle in MySQL um und worauf Sie achten müssen
Inhaltsverzeichnis 1. Tabellenmethode umbenennen ...