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

Detaillierte Erklärung zum Schreiben und Verwenden von Makefile unter Linux

Inhaltsverzeichnis Makefile Makefile-Benennung un...

Detaillierte Analyse des Diff-Algorithmus in React

Verständnis des Diff-Algorithmus in React diff -A...

Diskussion zum Problem verstümmelter Zeichen in Iframe-Seitenparametern

Ich bin auf ein sehr ungewöhnliches Problem mit ve...

Eine kurze Analyse der Unterschiede zwischen „:=“ und „=“ in MySQL

= Nur beim Setzen und Aktualisieren wirkt es wie ...

Detaillierte Erklärung der Anwendung von CSS Sprite

CSS Sprite, auch bekannt als CSS Sprite, ist eine...

Detaillierte Erklärung von Group By und Having in MySQL

Mit der GROUP BY-Syntax können die Abfrageergebni...

Vue implementiert Chat-Schnittstelle

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung der Verwendung von JSON.parse und JSON.stringify

Inhaltsverzeichnis JSON.parse JSON.parse-Syntax R...

Detaillierte Erklärung der dynamischen Angular-Komponenten

Inhaltsverzeichnis Anwendungsszenarien So erreich...

Beispielcode mit SCSS in Uni-App

Aufgetroffene Fallstricke Ich habe den ganzen Nac...

Drei JavaScript-Methoden zur Lösung des Joseph-Ring-Problems

Inhaltsverzeichnis Überblick Problembeschreibung ...