JavaScript implementiert den Front-End-Countdown-Effekt

JavaScript implementiert den Front-End-Countdown-Effekt

In diesem Artikel wird der spezifische JavaScript-Code zur Erzielung des Front-End-Countdown-Effekts als Referenz freigegeben. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
  <Stil>
    div {
      Polsterung: 10px;
      Schriftgröße: 100px;
    }
    
    P {
      schweben: links;
      Breite: 300px;
      Höhe: 300px;
      Rand: 1px durchgezogen #000000;
      Farbe: #ffffff;
      Hintergrundfarbe: #333333;
      Textausrichtung: zentriert;
      Zeilenhöhe: 300px;
    }
  </Stil>
</Kopf>

<Text>
  <div>
    <p class="Stunde">1</p>
    <p class="Minute">2</p>
    <p Klasse="zweite">3</p>
  </div>
  <Skript>
    window.addEventListener('laden', Funktion() {
      //Elemente abrufenvar hour = document.querySelector('.hour'); //Blackbox für Stundenvar minute = document.querySelector('.minute'); //Blackbox für Minutenvar second = document.querySelector('.second'); //Blackbox für Sekundenvar inputTime = +new Date('2021-2-6 18:00:00'); //Gibt die Gesamtzahl der Millisekunden der Benutzereingabe zurück timecountDown(); //Rufen Sie diese Funktion einmal auf, um zu verhindern, dass die Seite beim ersten Aktualisieren leer ist//Starten Sie den TimersetInterval(countDown, 1000);

      Funktion CountDown() {
        var nowTime = +new Date(); //Gibt die Gesamtzahl der Millisekunden der aktuellen Zeit zurück var times = (inputTime - nowTime) / 1000; //tiems ist die Gesamtzahl der Millisekunden der verbleibenden Zeit var h = parseInt(times / 60 / 60 % 24); //h = h < 10 ? '0' + h : h;
        hour.innerHTML = h; //Gebe der Stunden-Blackbox die verbleibenden Stunden an var m = parseInt(times / 60 % 60); //Minuten m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60); //Aktuelle Sekunden s = s < 10 ? '0' + s : s;
        zweites.innerHTML = s;
      }
    })
</Skript>

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:
  • JS-Countdown-Implementierungscode (Stunden, Minuten, Sekunden)
  • JS-Countdown (Tage, Stunden, Minuten, Sekunden)
  • Einfacher und leicht zu verwendender Countdown-JS-Code
  • js-Code zur Realisierung des 60-Sekunden-Countdowns beim Klicken auf die Schaltfläche
  • 2 einfache JS-Countdown-Methoden
  • Beispiel für die Implementierung einer einfachen Countdown-Funktion mit nativem JS
  • js Countdown-Sprungbeispiel nach ein paar Sekunden
  • Ein guter JS-HTML-Seiten-Countdown kann auf Sekunden genau sein
  • js realisiert den Countdown-Effekt des Klickens, um den Bestätigungscode zu erhalten
  • Javascript implementiert den Countdown für Produkt-Blitzverkäufe (Zeit wird mit der Serverzeit synchronisiert)

<<:  Sehen Sie sich die häufig verwendeten SQL-Anweisungen in MySQL an (ausführliche Erklärung)

>>:  SSH-Portweiterleitung, lokale Portweiterleitung, Remote-Portweiterleitung, dynamische Portweiterleitungsdetails

Artikel empfehlen

FEHLER 1045 (28000): Zugriff verweigert für Benutzer ''root''@''localhost'' (mit Passwort: JA) Praktische Lösung

Gestern gab es keine Probleme beim Herstellen ein...

Natives JS zur Implementierung eines atmenden Karussells

Heute zeige ich Ihnen ein mit nativem JS implemen...

Referenz zur Webseitenerstellung im IE6 - Standardstil im IE6

Dies ist eigentlich kein offizielles Dokument des ...

Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten

Inhaltsverzeichnis 1. Was ist ein Prototyp? 2. Pr...

Installieren Sie Docker für Windows unter Windows 10 Home Edition

0. Hintergrund Hardware: Xiaomi Notebook Air 13/I...

Grafisches Tutorial zur Installation und Konfiguration von Ubuntu Server 16.04 MySQL 8.0

Grafisches Tutorial zur Installation und Konfigur...

CSS3-Animation: Das Bild wird allmählich größer, wenn sich die Maus darauf befindet, und allmählich kleiner, wenn die Maus es verlässt

Wirkungsprüfungsadresse: Tourplan (uplanok.com) C...

Vue ElementUI implementiert einen asynchronen Ladebaum

In diesem Artikelbeispiel wird der spezifische Co...

Beispielanalyse zum Beheben von Problemen in historischen Linux-Images

Fix für Probleme mit historischen Linux-Images De...

Textbereich Textbereich Breite und Höhe Breite und Höhe Automatische Anpassung Implementierungscode

Code kopieren Der Code lautet wie folgt: <HTML...

So erstellen Sie manuell ein neues Image mit Docker

In diesem Artikel wird die Methode zum manuellen ...

Einführung in die Verwendung des MySQL mysqladmin-Clients

Inhaltsverzeichnis 1. Überprüfen Sie den Status d...

Verwenden von js zum Implementieren der bidirektionalen Bindungsfunktion von Daten in Vue2.0

Object.defineProperty verstehen Grammatik: Object...

Lösung zum Erstellen mehrerer Datenbanken, wenn Docker PostgreSQL startet

1 Einleitung Im Artikel „PostgreSQL mit Docker st...

Detaillierte Beispiele für den Unterschied zwischen den Methoden watch und computed in Vue.js

Inhaltsverzeichnis Vorwort einführen 1. Wirkungsm...