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

So stellen Sie HTTPS kostenlos auf Tencent Cloud bereit

Als ich kürzlich ein WeChat-Applet schrieb, erfor...

So fügen Sie ein Lua-Modul zu Nginx hinzu

Lua installieren wget http://luajit.org/download/...

Details zum JavaScript-Timer

Inhaltsverzeichnis 1. Kurze Einführung 2. Interva...

So legen Sie eine horizontale Navigationsstruktur in HTML fest

In diesem Artikel werden Ihnen zwei Methoden zum ...

Linux-Systemaufrufe für Betriebsdateien

Inhaltsverzeichnis 1. Öffnen Sie die Datei Parame...

Detailliertes Tutorial zur Installation der dekomprimierten Version von MySQL 5.7.19 auf Windows Server 2016

Das Installations-Tutorial für die dekomprimierte...

Detaillierte Schritte zur Installation und Konfiguration von MySQL 5.7

1. MySQL herunterladen 1. Melden Sie sich auf der...

Was ist em? Einführung und Konvertierungsmethode von em und px

Was ist sie? „em“ bezieht sich auf die Schrifthöhe...

Datenbank löschen und weglaufen? So sichern Sie die MySQL-Datenbank mit xtraback

1. Die mysqldump-Sicherungsmethode verwendet eine...

Das Docker-Intranet erstellt DNS und verwendet den Domänennamenzugriff anstelle des IP:Port-Vorgangs.

Wenn ich beispielsweise einen Jenkins-Server in m...

Implementieren eines Einkaufswagens mit nativem JavaScript

In diesem Artikel wird der spezifische JavaScript...

Lösen Sie das Problem der Installation von Theano auf Ubuntu 19

Lösung: Ändern Sie die Datei setup.py direkt in d...

Vue-Plugin-Fehler: Auf dieser Seite wurde Vue.js erkannt. Problem gelöst

Das Vue-Plugin meldet einen Fehler: Vue.js wurde ...

Detaillierte Erklärung der TMPF-Mounts im Docker-Datenspeicher

Bevor Sie diesen Artikel lesen, hoffe ich, dass S...

Detaillierte Erläuterung der Verwendung des Baidu-Stils in Eslint im React-Projekt

1. Installieren Sie das Baidu Eslint Rule-Plugin ...