Das Vue-CLI-Framework implementiert eine Timer-Anwendung

Das Vue-CLI-Framework implementiert eine Timer-Anwendung

Technischer Hintergrund

Diese Anwendung verwendet das Vue-CLI-Framework und verwendet benutzerdefinierte Komponenten (Aufteilen von Schaltflächen in separate Komponenten) und Vue-Vorlagen.

Anweisungen

Hochzählen starten: Klicken Sie in der Symbolleiste auf die Schaltfläche „Hochzählen starten“. Die Tastenkombination ist die Eingabetaste.

Countdown starten: Nachdem Sie die Zeit in das Eingabefeld eingegeben haben, klicken Sie auf die Schaltfläche „Countdown starten“, um den Countdown zu starten.

Timer anhalten: Klicken Sie auf die Schaltfläche „Timer anhalten“, um ihn anzuhalten.

Vorwärts/Countdown löschen: Klicken Sie auf diese Schaltfläche und der Timer kehrt in den Ausgangszustand zurück und wartet auf einen neuen Countdown.

Zeitmessung neu starten: Klicken Sie auf diese Schaltfläche und die Zeitmessung wird neu gestartet.

Timer fortsetzen: Klicken Sie auf diese Schaltfläche, um den angehaltenen Zustand fortzusetzen.

Code

Initialisieren Sie zuerst das Projekt

vue init webpack <Projektname>

Legen Sie die Datei in den Komponentenordner: CounterButton.vue

<Vorlage>
  <div>
    <button v-bind:class="styleObject" v-on:click="$emit('click-button')">{{ text }}</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "CounterButton",
  Requisiten: {
    Text: Zeichenfolge
  },
  Daten: Funktion() {
    zurückkehren {
      Stilobjekt: {
        countup: falsch,
        Countdown: falsch,
        klar: falsch,
        Pause: falsch,
        Neustart: falsch,
        Lebenslauf: falsch
      }
    };
  },
  erstellt: function() {
    if (this.text == "Zählen beginnen") {
      dies.styleObject.countup = wahr;
    } sonst wenn (dieser.text == "Countdown starten") {
      dies.styleObject.countdown = wahr;
    } sonst wenn (this.text == "Countdown löschen" || this.text == "Countdown löschen") {
      dieses.styleObject.clear = true;
    } sonst wenn (this.text == "Timer anhalten") {
      dies.styleObject.pause = wahr;
    } sonst wenn (this.text == "Zeitpunkt neu starten") {
      dieses.styleObject.restart = true;
    } sonst wenn (this.text == "Timer fortsetzen") {
      dieses.styleObject.resume = wahr;
    }
  }
};
</Skript>

<Stil>
.hochzählen {
  Hintergrundfarbe: #2188e9;
  Rahmenradius: 5px;
  Rahmenfarbe: #2188e9;
  Position: absolut;
  links: 310px;
  oben: 15px;
  Breite: 98px;
  Höhe: 40px;
  Schriftfamilie: PingFangSC-Regular, „PingFang SC“, serifenlos;
  Schriftgröße: 16px;
  Farbe: #ffffff;
}

.Countdown {
  Hintergrundfarbe: #2188e9;
  Rahmenradius: 5px;
  Rahmenfarbe: #2188e9;
  Position: absolut;
  links: 428px;
  oben: 15px;
  Breite: 98px;
  Höhe: 40px;
  Schriftfamilie: PingFangSC-Regular, „PingFang SC“, serifenlos;
  Schriftgröße: 16px;
  Farbe: #ffffff;
}

.klar {
  Hintergrundfarbe: #dd2e1d;
  Rahmenradius: 5px;
  Rahmenfarbe: #dd2e1d;
  Position: absolut;
  links: 964px;
  oben: 15px;
  Breite: 98px;
  Höhe: 40px;
  Schriftfamilie: PingFangSC-Regular, „PingFang SC“, serifenlos;
  Schriftgröße: 16px;
  Farbe: #ffffff;
}

.pause {
  Hintergrundfarbe: #2188e9;
  Rahmenradius: 5px;
  Rahmenfarbe: #2188e9;
  Position: absolut;
  links: 227px;
  oben: 15px;
  Breite: 98px;
  Höhe: 40px;
  Schriftfamilie: PingFangSC-Regular, „PingFang SC“, serifenlos;
  Schriftgröße: 16px;
  Farbe: #ffffff;
}

.neustart {
  Hintergrundfarbe: #ffb020;
  Rahmenradius: 5px;
  Rahmenfarbe: #ffb020;
  Position: absolut;
  links: 1082px;
  oben: 15px;
  Breite: 98px;
  Höhe: 40px;
  Schriftfamilie: PingFangSC-Regular, „PingFang SC“, serifenlos;
  Schriftgröße: 16px;
  Farbe: #ffffff;
}

.wieder aufnehmen {
  Hintergrundfarbe: #2188e9;
  Rahmenradius: 5px;
  Rahmenfarbe: #2188e9;
  Position: absolut;
  links: 227px;
  oben: 15px;
  Breite: 98px;
  Höhe: 40px;
  Schriftfamilie: PingFangSC-Regular, „PingFang SC“, serifenlos;
  Schriftgröße: 16px;
  Farbe: #ffffff;
}
</Stil>

Ändern Sie App.vue in

<Vorlage>
  <div id="app">
    <div Klasse="Werkzeugleiste">
      <div v-show="initialGesehen">
        <input v-model="Stunde" id="Stunde" />

        <input v-model="Minute" id="Minute" />

        <input v-model="zweite" id="zweite" />

        <span id="hourlabel">Stunde</span>

        <span id="minutelabel">Minuten</span>

        <span id="secondlabel">Sekunden</span>

        <counter-button text="Starte den Hochzählen" v-on:click-button="startCountUp" id="countup"></counter-button>

        <counter-button text="Countdown starten" v-on:click-button="startCountDown" id="countdown"></counter-button>
      </div>

      <span id="Hinweis" v-show="hintSeen">{{ Hinweis }}</span>

      <counter-button v-bind:text="Text löschen" v-on:click-button="Zähler löschen" v-show="Gesehen löschen" id="Löschen"></counter-button>
      <counter-button text="Timer pausieren" v-on:click-button="pauseCounter" v-show="pauseGesehen" id="pause"></counter-button>
      <counter-button text="Zählung neu starten" v-on:click-button="restartCounter" v-show="restartSeen" id="restart"></counter-button>
      <counter-button text="Fortsetzen-Timer" v-on:click-button="resumeCounter" v-show="resumeSeen" id="resume"></counter-button>
    </div>
    <span id="time">{{ Zeit }}</span>
  </div>
</Vorlage>

<Skript>
importiere CounterButton aus "./components/CounterButton";
Standard exportieren {
  Name: "App",
  Daten: Funktion() {
    zurückkehren {
      Status: 1,
      // Status---1: ​​vor dem Start; 2: Aufwärts-Timing; 3: Abwärts-Timing; 4: Aufwärts-Pause;
      // 5: Herunterfahren pausiert; 6: Herunterfahren beendet;
      Stunde: null,
      Minute: null,
      zweite: null,
      Zeit: "00:00:00",
      Timer: null,
      Stunde: 0,
      Minute: 0,
      Sekunde: 0,
      Millisekunde: 0,
      Stundenzeichenfolge: "",
      minuteString: "",
      zweiterString: "",
      Aufzeichnungsstunde: 0,
      Rekordminute: 0,
      RekordSecond: 0,
      RekordMillisekunde: 0,
      Hinweis: "Countdown bis 12:20:00",
      clearText: "Countdown löschen",
      initialSeen: wahr,
      clearSeen: falsch,
      pauseSeen: false,
      restartSeen: false,
      LebenslaufGesehen: false,
      HinweisGesehen: false
    };
  },
  Methoden: {
    Format: Funktion (Stunde, Minute, Sekunde) {
      if (Sekunde < 10) {
        this.secondString = "0" + Sekunde;
      } anders {
        this.secondString = Sekunde;
      }

      if (Minute < 10) {
        this.minuteString = "0" + Minute;
      } anders {
        this.minuteString = Minute;
      }

      if (Stunde < 10) {
        this.hourString = "0" + Stunde;
      } anders {
        this.hourString = Stunde;
      }
      zurückkehren (
        diese.StundenString + ":" + diese.MinuteString + ":" + diese.SekundenString
      );
    },
    Status ändern: Funktion(ZielStatus) {
      wenn (aimStatus == 1) {
        // vor dem Start
        dies.initialSeen = wahr;
        this.clearSeen = falsch;
        this.pauseSeen = falsch;
        dies.restartSeen = falsch;
        dies.resumeSeen = falsch;
        this.hintSeen = falsch;
      } sonst wenn (aimStatus == 2 || aimStatus == 3) {
        // Aufwärts-Timing || Abwärts-Timing
        this.initialSeen = falsch;
        dies.clearSeen = wahr;
        dies.pauseSeen = true;
        dies.restartSeen = true;
        this.resumeSeen = falsch;
        this.hintSeen = wahr;

        wenn (aimStatus == 2) {
          this.hint = "Die Zeitmessung läuft";
          this.clearText = "Positive Zeit löschen";
        } sonst wenn (aimStatus == 3) {
          Dies.recordHour = parseInt(dies.recordMillisecond / 3600000);
          diese.recordMinute = parseInt(
            (dieser.AufzeichnungMillisekunde % 3600000) / 60000
          );
          this.recordSecond = parseInt((this.recordMillisecond % 60000) / 1000);
          dieser.Hinweis =
            "Countdown" +
            dieses.format(diese.Aufzeichnungsstunde, diese.Aufzeichnungsminute, diese.Aufzeichnungssekunde);
          this.clearText = "Countdown löschen";
        }
      } sonst wenn (aimStatus == 4 || aimStatus == 5) {
        // hoch pausiert || runter pausiert
        this.initialSeen = falsch;
        dies.clearSeen = wahr;
        this.pauseSeen = falsch;
        dies.restartSeen = true;
        dies.resumeSeen = wahr;
        this.hintSeen = wahr;

        wenn (aimStatus == 4) {
          // pausiert
          this.hint = "Zeitmessung anhalten";
          this.clearText = "Positive Zeit löschen";
        } sonst wenn (aimStatus == 5) {
          // nach unten pausieren
          Dies.recordHour = parseInt(dies.recordMillisecond / 3600000);
          diese.recordMinute = parseInt(
            (dieser.AufzeichnungMillisekunde % 3600000) / 60000
          );
          this.recordSecond = parseInt((this.recordMillisecond % 60000) / 1000);
          dieser.Hinweis =
            "Countdown pausieren" +
            dieses.format(diese.Aufzeichnungsstunde, diese.Aufzeichnungsminute, diese.Aufzeichnungssekunde);
          this.clearText = "Countdown löschen";
        }
      } sonst wenn (aimStatus == 6) {
        // Download abgeschlossen
        dies.initialSeen = falsch;
        dies.clearSeen = wahr;
        this.pauseSeen = falsch;
        dies.restartSeen = true;
        dies.resumeSeen = falsch;
        this.hintSeen = wahr;

        Dies.recordHour = parseInt(dies.recordMillisecond / 3600000);
        diese.recordMinute = parseInt(
          (dieser.AufzeichnungMillisekunde % 3600000) / 60000
        );
        this.recordSecond = parseInt((this.recordMillisecond % 60000) / 1000);
        dieser.Hinweis =
          "Countdown" +
          dieses.format(diese.DatensatzStunde, diese.DatensatzMinute, diese.DatensatzSekunde) +
          "Beendet";
      }
    },
    CountUp: Funktion() {
      dies.Millisekunde += 50;
      diese.Stunde = parseInt(diese.Millisekunde / 3600000);
      diese.Minute = parseInt((diese.Millisecond % 3600000) / 60000);
      diese.Sekunde = parseInt((diese.Millisecond % 60000) / 1000);
      diese.Zeit = dieses.Format(diese.Stunde, diese.Minute, diese.Sekunde);
    },
    CountDown: Funktion() {
      dies.Millisekunde -= 50;
      diese.Stunde = parseInt(diese.Millisekunde / 3600000);
      diese.Minute = parseInt((diese.Millisecond % 3600000) / 60000);
      diese.Sekunde = parseInt((diese.Millisecond % 60000) / 1000);
      wenn (diese.Millisekunde <= 0) {
        : ClearInterval(dieser.Timer);
        dies.changeStatus(6);
      }
      diese.Zeit = dieses.Format(diese.Stunde, diese.Minute, diese.Sekunde);
    },
    startCountUp: Funktion() {
      dieser.status = 2;
      dies.Millisekunde = 0;
      dies.changeStatus(dieser.status);
      dieser.timer = setzeInterval(diesen.CountUp, 50);
    },
    startCountDown: Funktion() {
      dieser.status = 3;
      diese.Stunde = diese.Stunde;
      wenn (diese.Minute > 59) {
        diese.Minute = 59;
      } anders {
        diese.Minute = diese.Minute;
      }
      wenn (diese.Sekunde > 59) {
        diese.Sekunde = 59;
      } anders {
        diese.Sekunde = diese.Sekunde;
      }

      diese.Stunde = null;
      diese.minute = null;
      diese.Sekunde = null;

      dies.Millisekunde =
        diese.Stunde * 3600000 + diese.Minute * 60000 + diese.Sekunde * 1000;
      dies.AufzeichnungMillisekunde = dies.Millisekunde;
      dies.changeStatus(dieser.status);

      dieser.timer = setzeInterval(dieser.CountDown, 50);
    },
    Zähler löschen: Funktion() {
      dieser.status = 1;
      dies.changeStatus(dieser.status);
      : ClearInterval(dieser.Timer);
      diese.Zeit = dieses.Format(0, 0, 0);
    },
    pauseCounter: function() {
      wenn (dieser.status == 2) {
        // Jetzt hochzählen
        dieser.status = 4;
        dies.changeStatus(dieser.status);
        : ClearInterval(dieser.Timer);
      } sonst wenn (dieser.status == 3) {
        // jetzt runterzählen
        dieser.status = 5;
        dies.changeStatus(dieser.status);
        : ClearInterval(dieser.Timer);
      }
    },
    NeustartZähler: Funktion() {
      wenn (dieser.status == 2 || dieser.status == 4) {
        dieser.status = 2;
        dies.Millisekunde = 0;
        dies.changeStatus(dieser.status);
        : ClearInterval(dieser.Timer);
        dieser.timer = setzeInterval(diesen.CountUp, 50);
      } sonst wenn ((dieser.status = 3 || dieser.status == 5 || dieser.status == 6)) {
        dieser.status = 3;
        dies.Millisekunde = dies.AufzeichnungMillisekunde;
        dies.changeStatus(dieser.status);
        : ClearInterval(dieser.Timer);
        dieser.timer = setzeInterval(dieser.CountDown, 50);
      }
    },
    resumeCounter: Funktion() {
      wenn (dieser.status == 4) {
        dieser.status = 2;
        dies.changeStatus(dieser.status);
        dieser.timer = setzeInterval(diesen.CountUp, 50);
      } sonst wenn ((Status = 5)) {
        dieser.status = 3;
        dies.changeStatus(dieser.status);
        dieser.timer = setzeInterval(dieser.CountDown, 50);
      }
    },
    //Tastaturereignis handleKeyup(event) {
      const e = Ereignis || Fenster.Ereignis || Argumente.callee.caller.Argumente[0];
      wenn (!e) zurückgeben;
      const { Schlüssel, Schlüsselcode } = e;
      if (Taste == "Eingabe") {
        wenn (dieser.status == 1) {
          // vor dem Start
          dieser.status = 2;
          dies.Millisekunde = 0;
          dies.changeStatus(dieser.status);
          dieser.timer = setzeInterval(diesen.CountUp, 50);
        }
      } sonst wenn (Schlüsselcode == 32) {
        wenn (dieser.status == 2) {
          // Jetzt hochzählen
          dieser.status = 4;
          dies.changeStatus(dieser.status);
          : ClearInterval(dieser.Timer);
        } sonst wenn (dieser.status == 3) {
          // jetzt runterzählen
          dieser.status = 5;
          dies.changeStatus(dieser.status);
          : ClearInterval(dieser.Timer);
        } sonst wenn (dieser.status == 4) {
          dieser.status = 2;
          dies.changeStatus(dieser.status);
          dieser.timer = setzeInterval(diesen.CountUp, 50);
        } sonst wenn (dieser.status == 5) {
          dieser.status = 3;
          dies.changeStatus(dieser.status);
          dieser.timer = setzeInterval(dieser.CountDown, 50);
        }
      }
    }
  },
  montiert: Funktion () {
    window.addEventListener("keyup", this.handleKeyup);
  },
  zerstört() {
    window.removeEventListener("keyup", this.handleKeyup);
  },
  Komponenten:
    ZählerButton
  }
};
</Skript>

<Stil>
Körper {
  Rand: 0;
  Polsterung: 0;
}

.Werkzeugleiste {
  Hintergrundfarbe: #97a5bc;
  Breite: 1220px;
  Höhe: 70px;
}

#Stunde {
  Hintergrundfarbe: weiß;
  Rahmenradius: 5px;
  Position: absolut;
  links: 40px;
  oben: 15px;
  Breite: 69px;
  Höhe: 34px;
  Schriftgröße: 15px;
}

#Stundenlabel {
  Position: absolut;
  links: 86px;
  oben: 24px;
  Schriftfamilie: PingFangSC-Regular, „PingFang SC“, serifenlos;
  Schriftgröße: 16px;
  Farbe: #222222;
}

#minute {
  Hintergrundfarbe: weiß;
  Rahmenradius: 5px;
  Position: absolut;
  links: 130px;
  oben: 15px;
  Breite: 69px;
  Höhe: 34px;
  Schriftgröße: 15px;
}

#minutelabel {
  Position: absolut;
  links: 177px;
  oben: 24px;
  Schriftfamilie: PingFangSC-Regular, „PingFang SC“, serifenlos;
  Schriftgröße: 16px;
  Farbe: #222222;
}

#zweite {
  Hintergrundfarbe: weiß;
  Rahmenradius: 5px;
  Position: absolut;
  links: 220px;
  oben: 15px;
  Breite: 69px;
  Höhe: 34px;
  Schriftgröße: 15px;
}

#zweitesLabel {
  Position: absolut;
  links: 268px;
  oben: 24px;
  Schriftfamilie: PingFangSC-Regular, „PingFang SC“, serifenlos;
  Schriftgröße: 16px;
  Farbe: #222222;
}

#Zeit {
  Position: absolut;
  links: 131px;
  oben: 197px;
  Schriftgröße: 200px;
  Schriftfamilie: PTMono-Bold, „PT Mono“, Monospace;
  Schriftstärke: 700;
  Farbe: #333333;
}

#Hinweis {
  Position: absolut;
  links: 40px;
  oben: 24px;
  Schriftfamilie: PTMono-Bold, „PT Mono“, Monospace;
  Schriftgröße: 16px;
  Farbe: weiß;
}
</Stil>

Schließlich im Verzeichnis use

npm-Ausführung dev

um das Projekt auszuführen.

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:
  • Implementierung eines einfachen Timers basierend auf der Vue-Methode
  • Verwenden von Vue zum Implementieren einer Timerfunktion
  • Vue.js implementiert eine einfache Timerfunktion
  • Vue implementiert eine einfache Timer-Komponente
  • So implementieren Sie den Vue-Timer
  • Detaillierte Verwendung des Vue-Timers
  • Lösen Sie das Problem, dass der Timer weiterhin ausgeführt wird, nachdem die Vue-Komponente zerstört wurde
  • Vue-Beispielcode mit Timer zum Erzielen eines Laufschrifteffekts
  • Implementierungscode der Vue-Timer-Komponente
  • So kapseln Sie Timerkomponenten in Vue3

<<:  Implementierung der MySQL-Mehrversions-Parallelitätskontrolle MVCC

>>:  Beispiel der MySQL-Group_Concat-Methode zum Schreiben von Gruppenfeldern in eine Zeile

Artikel empfehlen

nginx+tomcat-Beispiel für den Zugriff auf das Projekt über den Domänennamen

Ich wollte wissen, wie ich mit einem Domänennamen...

Tutorial zur HTML-Tabellenauszeichnung (41): Breiten- und Höhenattribute der Tabellenüberschrift WIDTH, HEIGHT

Standardmäßig werden Breite und Höhe der Kopfzeil...

MySQL Dezimalzahl unsigned Update negative Zahlen in 0 umgewandelt

Heute habe ich bei der Überprüfung des Parallelit...

Eine kurze Diskussion darüber, ob CSS-Animationen durch JS blockiert werden

Der Animationsteil von CSS wird von JS blockiert,...

React realisiert sekundären Verknüpfungseffekt (Treppeneffekt)

In diesem Artikel wird der spezifische Code von R...

Docker stellt nginx bereit und mountet Ordner und Dateioperationen

Während dieser Zeit habe ich Docker studiert und ...

Lösung für das zu langsame Herunterladen des Docker-Images

Der Download des Docker-Images hängt oder ist zu ...

Einführung in die Verwendung des Select-Optgroup-Tags in HTML

Gelegentlich muss ich ausgewählte Inhalte gruppier...

Detaillierte Erläuterung der MySQL 8.0-Wörterbuchtabellenerweiterung

Das Datenwörterbuch in MySQL ist eine der wichtig...

Methoden und Schritte zum Upgrade von MySql5.x auf MySql8.x

Mehrere Unterschiede zwischen MySQL 5.x und MySQL...

Implementierung der Docker-Batch-Container-Orchestrierung

Einführung Der Dockerfile-Build-Ausführungsvorgan...

So lösen Sie das Problem der automatischen Paketaktualisierung im Debian-System

Ich weiß nicht, wann es angefangen hat, aber jede...

Webdesign-Erfahrung: 5 hervorragende Webdesign-Konzepte, vollständige Analyse (Bilder)

Im Gegensatz zu anderen Designarten verändert sich...

Lösung für das Problem, dass Tomcat beim normalen Zugriff auf localhost eine 404-Meldung ausgibt

Als ich heute Tomcat für den Zugriff auf die Proj...

IDEA-Konfigurationsprozess von Docker

IDEA ist das am häufigsten verwendete Entwicklung...