Vue implementiert einen Countdown zwischen angegebenen Daten

Vue implementiert einen Countdown zwischen angegebenen Daten

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung des Countdowns zwischen bestimmten Daten zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Das Wirkungsdiagramm sieht wie folgt aus

Die Datumsverarbeitungsbibliothek moment.js wird hier wie folgt verwendet

npm install moment oder yarn add moment

html

<div Klasse="Zeit-down">
  <div class="zurück">{{Tagesnummer}}</div>
  <div class="font-14 date">Tag</div>
  <div class="zurück">{{Stundenzahl}}</div>
  <div class="font-14 date">Uhrzeit</div>
  <div class="back">{{minuteNum}}</div>
  <div class="font-14 date">Minuten</div>
  <div class="zurück">{{zweiteNummer}}</div>
  <div class="font-14 date">Sekunden</div>
</div>

js

importiere Moment aus „Moment“;
Standard exportieren {
    Name: 'TimeRangPage',
    Requisiten: {
      Startzeit: String,
      endTime: Zeichenfolge
    },
    Daten () {
      zurückkehren {
        Tage: 0,
        Stunden: 0,
        Minuten: 0,
        Sekunden: 0,
        timeSetInterval: null,
        showTimeDown: falsch,
        showOver: false
      };
    },
    erstellt () {
      wenn (Moment(neues Datum()).istVor(dieser.Startzeit)) {
        dies.showTimeDown = wahr;
        dies.timeDown();
      }
      wenn (Moment (neues Datum ()).istNach(dieser.Endzeit)) dies.showOver = wahr;
    },
    Methoden: {
      ZeitAb () {
        this.timeSetInterval = setInterval(() => {
          wenn (Moment(diese.Startzeit).istVorher(Moment())) {
            this.showTimeDown = falsch;
            Intervall löschen(dieses.ZeitIntervall festlegen);
            Standort.neu laden();
          }
          let dur = Moment.Dauer(Moment(this.startTime) - Moment(), 'ms');
          diese.Tage = dur.get('Tage');
          this.hours = dur.get('Stunden');
          this.minutes = dur.get('minutes');
          this.seconds = dur.get('Sekunden');
        }, 1000);
      }
    },
    berechnet: {
      TagNummer () {
        wenn (diese Tage < 10) returniere '0' + diese Tage;
        gib diese Tage zurück;
      },
      Stundenzahl () {
        wenn (diese.Stunden < 10) returniere '0' + diese.Stunden;
        gib dies.Stunden zurück;
      },
      minuteNum () {
        wenn (diese.Minuten < 10) returniere '0' + diese.Minuten;
        gib dies.Minuten zurück;
      },
      zweiteZahl () {
        wenn (diese.Sekunden < 10) returniere '0' + diese.Sekunden;
        gib dies.Sekunden zurück;
      }
    }
  };

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:
  • Vue schreibt eine einfache Countdown-Button-Funktion
  • Einfache Implementierung der 60-Sekunden-Countdown-Funktion des Vue-Verifizierungscodes
  • Vue2.0-Countdown-Plugin (Zeitstempel-Aktualisierungssprung ist nicht betroffen)
  • SMS-Bestätigungscode-Countdown-Demo basierend auf Vue
  • Vue implementiert die Countdown-Funktion der Bestätigungscode-Schaltfläche
  • Mehrere Codebeispiele zur Countdown-Implementierung in Vue
  • Vue implementiert die Countdown-Funktion des Mall-Flash-Sales
  • Vue implementiert einen Countdown, um den Bestätigungscode-Effekt zu erzielen
  • Detaillierte Erklärung zum Entwerfen einer Countdown-Komponente in Vue
  • Vue+Canvas realisiert ein Countdown-Plugin mit coolen Uhreffekten (ein Vue2-Plugin, das auf npm veröffentlicht wurde und sofort verwendet werden kann)

<<:  So richten Sie geplante Aufgaben in Linux und Windows ein

>>:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.23 Winx64 unter Win10

Artikel empfehlen

Mobile Frontend-Anpassungslösung (Zusammenfassung)

Ich habe online gesucht und festgestellt, dass in...

1 Minute Vue implementiert Rechtsklickmenü

Inhaltsverzeichnis Rendern Installieren Code-Impl...

HTML ist eigentlich die Anwendung zum Erlernen mehrerer wichtiger Tags

Nachdem der Artikel „Dies wird eine Revolution“ er...

Fallstudie zum Löschen und Neuinstallieren eines Mac-Knotens

Mac-Knoten löschen und neu installieren löschen K...

Mysql löst das N+1-Abfrageproblem der Datenbank

Einführung In Orm-Frameworks wie Hibernate und My...

So installieren Sie MySQL 5.7 aus dem Quellcode in einer CentOS 7-Umgebung

Dieser Artikel beschreibt, wie MySQL 5.7 aus dem ...

So installieren Sie Babel mit NPM in VSCode

Vorwort Im vorherigen Artikel wurde die Installat...

Lösung zum Hinzufügen einer iptables-Firewall-Richtlinie zum MySQL-Dienst

Wenn Ihre MySQL-Datenbank auf einem CentOS7-Syste...

Beispielcode zur Implementierung eines reinen CSS-Popup-Menüs mit Transform

Vorwort Wenn Sie ein Topmenü erstellen, müssen Si...

So verwenden Sie die Markdown-Editor-Komponente in Vue3

Inhaltsverzeichnis Installieren Komponenten impor...

Tutorial zur kostenlosen Konfiguration der MySQL 5.7.18-Installationsversion

Installations-Tutorial zur kostenlosen Installati...

Bild-Tag für HTML-Webseite

Bild-Tag <IMG> einfügen Die farbenfrohen Web...

So verwenden Sie js zur Kommunikation zwischen zwei HTML-Fenstern

Szenario: Wenn Seite A Seite B öffnet, muss Seite...