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

Analyse der Prinzipien der MySQL Slow Query-bezogenen Parameter

MySQL Slow Query, dessen vollständiger Name „Slow...

Das WeChat-Applet realisiert die Chatroom-Funktion

In diesem Artikel wird der spezifische Code des W...

Ausführliche Erläuterung der Vue-Komponente „Multi-Select-Liste“

Eine Mehrfachauswahl ist ein Benutzeroberflächene...

Wie gut wissen Sie über die Vererbung in JavaScript?

Inhaltsverzeichnis Vorwort Die Beziehung zwischen...

JavaScript zur Implementierung des Countdowns für den SMS-Versand

In diesem Artikel wird der spezifische JavaScript...

So verwenden Sie die Firewall-Iptables-Strategie zum Weiterleiten von Ports auf Linux-Servern

Weiterleitung zwischen zwei verschiedenen Servern...

Eine kurze Diskussion über die Indexseitenstruktur, den Einfügepuffer und den adaptiven Hash-Index von InnoDB

Physische Struktur eines InnoDB-Index Alle InnoDB...

Einführung in die schnelle Docker-Bereitstellung eines SpringBoot-Projekts

1. Docker installieren Öffnen Sie zunächst die Li...

Detaillierte Erläuterung der MySQL-Datenbank mit zig Millionen Datenabfragen und -speicherungen

Inhaltsverzeichnis Datenverarbeitungslösung auf M...

Allgemeine Befehle zum Bereitstellen von InfluxDB und Mongo mit Docker

Bereitstellen einer Datenbank basierend auf Docke...

Implementierung einer einfachen Web-Uhr mit JavaScript

Verwenden Sie JavaScript, um eine Webseitenuhr zu...

Führen Sie die Schritte zum Erstellen eines Squid-Proxyservers unter Linux aus.

Vorwort Dieser Artikel stellt hauptsächlich die r...

Warum sollte CSS im Head-Tag platziert werden?

Denken Sie darüber nach: Warum sollte css im head...

Zusammenfassung des CSS-Zählers und des Inhalts

Die Inhaltseigenschaft wurde bereits in CSS 2.1 e...

SVG+CSS3 zum Erzielen eines dynamischen Welleneffekts

Eine Vektorwelle <svg viewBox="0 0 560 20...