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

JavaScript-Interview: So implementieren Sie die Methode zur Array-Abflachung

Inhaltsverzeichnis 1. Was ist Array-Flattening? 2...

Spezifische Verwendung der ES6-Array-Kopier- und Füllmethoden copyWithin() und fill()

Inhaltsverzeichnis Stapelkopie copyWithin() Array...

Vue Routing gibt die Betriebsmethode zum Wiederherstellen des Seitenstatus zurück

Routenparameter, Routennavigationswächter: Beibeh...

Erstellen Sie eine virtuelle Maschine und installieren Sie das Betriebssystem Redhat Linux auf VMware (grafisches Tutorial)

So erstellen Sie eine virtuelle Maschine auf VMwa...

MySQL-Sortierung mittels Index-Scan

Inhaltsverzeichnis Installieren Sie Sakila Index-...

Eine kurze Diskussion über den Unterschied zwischen MySQL-Primärschlüsseleinschränkung und eindeutiger Einschränkung

Inhaltsverzeichnis Primärschlüsseleinschränkung E...

MySQL Master-Slave-Prinzip und Konfigurationsdetails

MySQL Master-Slave-Konfiguration und Prinzip, zu ...

Detailliertes Tutorial zur Installation von Docker unter Windows

Da meine lokale MySQL-Version relativ niedrig ist...

Native js implementiert Warenkorb-Logik und -Funktionen

In diesem Artikelbeispiel wird der spezifische Co...

Eine kurze Einführung in MySQL-Datenbankoptimierungstechniken

Eine ausgereifte Datenbankarchitektur ist nicht v...

Detaillierte Erklärung der CocosCreator-Optimierung DrawCall

Inhaltsverzeichnis Vorwort Was ist DrawCall Welch...

Zusammenfassung von 6 Lösungen zur Implementierung des Singleton-Modus in JS

Vorwort Heute habe ich das Erzeugungsmuster im En...

CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken

Manchmal ist es schön, ein paar nette Scrollbar-E...

Detaillierte Erläuterung der Wissenspunkte zur Echtzeitsicherung der MySQL-Datenbank

Vorwort Der Bedarf an Echtzeit-Datenbanksicherung...

Ubuntu-Grundlagen-Tutorial: apt-get-Befehl

Vorwort Der Befehl apt-get ist ein Paketverwaltun...