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

Über das WeChat Mini-Programm zur Implementierung von Cloud-Zahlungen

Inhaltsverzeichnis 1. Einleitung 2. Gedankenanaly...

So wählen Sie das Format bei der Verwendung von Binlog in MySQL

Inhaltsverzeichnis 1. Drei Binlog-Modi 1.Anweisun...

So deinstallieren Sie Node und NPM vollständig auf dem Mac

npm deinstallieren sudo npm deinstallieren npm -g...

Detaillierte Erklärung der Verwendung des MySQL-Paradigmas

1. Paradigma Der englische Name des Paradigmas la...

Grundlegendes Lernprogramm zum Tabellen-Tag in HTML

Zusammensetzung der Tabellenbeschriftung Die Tabe...

So führen Sie py-Dateien direkt unter Linux aus

1. Erstellen Sie zuerst die Datei (wechseln Sie p...

Was sind MySQL-Dirty-Pages?

Inhaltsverzeichnis Schmutzige Seiten (Speichersei...