Vue-cliフレームワークはタイマーアプリケーションを実装します

技術的背景

このアプリケーションは vue-cli フレームワークを使用し、カスタムコンポーネント (ボタンを個別のコンポーネントに分割) と vue テンプレートを使用します。

説明書

カウントアップを開始する: ツールバーの「カウントアップを開始」ボタンをクリックします。ショートカットキーは「Enter」キーです。

カウントダウンを開始: 入力ボックスに時間を入力した後、「カウントダウンを開始」ボタンをクリックしてカウントダウンを開始します。

タイマーを一時停止: タイマーを一時停止するには、[タイマーを一時停止] ボタンをクリックします。

クリアフォワード/カウントダウン: このボタンをクリックすると、タイマーは初期状態に戻り、新しいカウントダウンを待機します。

タイミングを再開: このボタンをクリックするとタイマーが再開されます。

タイマーの再開: このボタンをクリックすると、一時停止状態から再開します。

コード

まずプロジェクトを初期化する

vue init webpack <プロジェクト名>

ファイルをコンポーネントフォルダに配置します: CounterButton.vue

<テンプレート>
  <div>
    <button v-bind:class="styleObject" v-on:click="$emit('click-button')">{{ text }}</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "カウンターボタン",
  小道具: {
    テキスト: 文字列
  },
  データ: 関数() {
    戻る {
      スタイルオブジェクト: {
        カウントアップ: false、
        カウントダウン: 偽、
        クリア: 偽、
        一時停止: 偽、
        再起動: false、
        履歴書: 偽
      }
    };
  },
  作成: 関数() {
    if (this.text == "カウントを開始") {
      this.styleObject.countup = true;
    } else if (this.text == "カウントダウンを開始") {
      this.styleObject.countdown = true;
    } else if (this.text == "カウントダウンをクリア" || this.text == "カウントダウンをクリア") {
      this.styleObject.clear = true;
    } else if (this.text == "タイマーを一時停止") {
      this.styleObject.pause = true;
    } else if (this.text == "タイミングを再開") {
      this.styleObject.restart = true;
    } else if (this.text == "タイマーを再開") {
      this.styleObject.resume = true;
    }
  }
};
</スクリプト>

<スタイル>
.countup{
  背景色: #2188e9;
  境界線の半径: 5px;
  境界線の色: #2188e9;
  位置: 絶対;
  左: 310px;
  上: 15px;
  幅: 98ピクセル;
  高さ: 40px;
  フォント ファミリ: PingFangSC-Regular、「PingFang SC」、サンセリフ;
  フォントサイズ: 16px;
  色: #ffffff;
}

.カウントダウン{
  背景色: #2188e9;
  境界線の半径: 5px;
  境界線の色: #2188e9;
  位置: 絶対;
  左: 428ピクセル;
  上: 15px;
  幅: 98ピクセル;
  高さ: 40px;
  フォント ファミリ: PingFangSC-Regular、「PingFang SC」、サンセリフ;
  フォントサイズ: 16px;
  色: #ffffff;
}

。クリア {
  背景色: #dd2e1d;
  境界線の半径: 5px;
  境界線の色: #dd2e1d;
  位置: 絶対;
  左: 964px;
  上: 15px;
  幅: 98ピクセル;
  高さ: 40px;
  フォント ファミリ: PingFangSC-Regular、「PingFang SC」、サンセリフ;
  フォントサイズ: 16px;
  色: #ffffff;
}

。一時停止 {
  背景色: #2188e9;
  境界線の半径: 5px;
  境界線の色: #2188e9;
  位置: 絶対;
  左: 227px;
  上: 15px;
  幅: 98ピクセル;
  高さ: 40px;
  フォント ファミリ: PingFangSC-Regular、「PingFang SC」、サンセリフ;
  フォントサイズ: 16px;
  色: #ffffff;
}

。再起動 {
  背景色: #ffb020;
  境界線の半径: 5px;
  境界線の色: #ffb020;
  位置: 絶対;
  左: 1082ピクセル;
  上: 15px;
  幅: 98ピクセル;
  高さ: 40px;
  フォント ファミリ: PingFangSC-Regular、「PingFang SC」、サンセリフ;
  フォントサイズ: 16px;
  色: #ffffff;
}

。再開する {
  背景色: #2188e9;
  境界線の半径: 5px;
  境界線の色: #2188e9;
  位置: 絶対;
  左: 227px;
  上: 15px;
  幅: 98ピクセル;
  高さ: 40px;
  フォント ファミリ: PingFangSC-Regular、「PingFang SC」、サンセリフ;
  フォントサイズ: 16px;
  色: #ffffff;
}
</スタイル>

App.vueを次のように変更します

<テンプレート>
  <div id="アプリ">
    <div class="ツールバー">
      <div v-show="initialSeen">
        <input v-model="時間" id="時間" />

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

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

        <span id="hourlabel">時間</span>

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

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

        <counter-button text="カウントアップを開始" v-on:click-button="startCountUp" id="countup"></counter-button>

        <counter-button text="カウントダウンを開始" v-on:click-button="startCountDown" id="countdown"></counter-button>
      </div>

      <span id="hint" v-show="hintSeen">{{ ヒント }}</span>

      <counter-button v-bind:text="clearText" v-on:click-button="clearCounter" v-show="clearSeen" id="clear"></counter-button>
      <counter-button text="タイマーを一時停止" v-on:click-button="pauseCounter" v-show="pauseSeen" id="pause"></counter-button>
      <counter-button text="カウントを再開" v-on:click-button="restartCounter" v-show="restartSeen" id="restart"></counter-button>
      <counter-button text="再開タイマー" v-on:click-button="resumeCounter" v-show="resumeSeen" id="再開"></counter-button>
    </div>
    <span id="time">{{ 時間 }}</span>
  </div>
</テンプレート>

<スクリプト>
「./components/CounterButton」からCounterButtonをインポートします。
エクスポートデフォルト{
  名前:「アプリ」、
  データ: 関数() {
    戻る {
      ステータス: 1,
      // ステータス --- 1: 開始前; 2: アップタイミング; 3: ダウンタイミング; 4: アップ一時停止;
      // 5: ダウン一時停止; 6: ダウン終了;
      時間: null、
      分: null、
      2番目: null、
      時間: "00:00:00",
      タイマー: null、
      時間: 0,
      分: 0,
      秒: 0,
      ミリ秒: 0,
      時間文字列: "",
      分文字列: "",
      2番目の文字列: "",
      記録時間: 0,
      記録分: 0,
      記録秒: 0,
      記録ミリ秒: 0,
      ヒント: 「12:20:00 までカウントダウン中」
      clearText: "カウントダウンをクリア",
      初期表示: true、
      clearSeen: false、
      pauseSeen: false、
      再起動: false、
      resumeSeen: false、
      ヒント: false
    };
  },
  メソッド: {
    フォーマット: 関数(時間、分、秒) {
      （秒数<10）の場合{
        this.secondString = "0" + 秒;
      } それ以外 {
        this.secondString = 秒;
      }

      (分 < 10) の場合 {
        this.minuteString = "0" + 分;
      } それ以外 {
        this.minuteString = 分;
      }

      (時間 < 10) の場合 {
        this.hourString = "0" + 時間;
      } それ以外 {
        this.hourString = 時間;
      }
      戻る （
        this.hourString + ":" + this.minuteString + ":" + this.secondString
      );
    },
    ステータスの変更: 関数(aimStatus) {
      （目標ステータス == 1）の場合{
        // 開始前
        this.initialSeen = true;
        this.clearSeen = false;
        this.pauseSeen = false;
        this.restartSeen = false;
        this.resumeSeen = false;
        this.hintSeen = false;
      } それ以外の場合 (aimStatus == 2 || aimStatus == 3) {
        // アップタイミング || ダウンタイミング
        this.initialSeen = false;
        this.clearSeen = true;
        this.pauseSeen = true;
        this.restartSeen = true;
        this.resumeSeen = false;
        this.hintSeen = true;

        （目標ステータス == 2）の場合{
          this.hint = "タイミングが実行中です";
          this.clearText = "正の時間をクリア";
        } それ以外の場合 (aimStatus == 3) {
          this.recordHour = parseInt(this.recordMillisecond / 3600000);
          this.recordMinute = parseInt(
            (this.recordミリ秒 % 3600000) / 60000
          );
          this.recordSecond = parseInt((this.recordMillisecond % 60000) / 1000);
          this.hint =
            「カウントダウン」+
            this.format(this.recordHour、this.recordMinute、this.recordSecond);
          this.clearText = "カウントダウンをクリア";
        }
      } それ以外の場合 (aimStatus == 4 || aimStatus == 5) {
        // 上一時停止 || 下一時停止
        this.initialSeen = false;
        this.clearSeen = true;
        this.pauseSeen = false;
        this.restartSeen = true;
        this.resumeSeen = true;
        this.hintSeen = true;

        （目標ステータス == 4）の場合{
          // 一時停止中
          this.hint = "一時停止のタイミング";
          this.clearText = "正の時間をクリア";
        } それ以外の場合 (aimStatus == 5) {
          // ダウン一時停止
          this.recordHour = parseInt(this.recordMillisecond / 3600000);
          this.recordMinute = parseInt(
            (this.recordミリ秒 % 3600000) / 60000
          );
          this.recordSecond = parseInt((this.recordMillisecond % 60000) / 1000);
          this.hint =
            「カウントダウンを一時停止」+
            this.format(this.recordHour、this.recordMinute、this.recordSecond);
          this.clearText = "カウントダウンをクリア";
        }
      } それ以外の場合 (aimStatus == 6) {
        // ダウン終了
        this.initialSeen = false;
        this.clearSeen = true;
        this.pauseSeen = false;
        this.restartSeen = true;
        this.resumeSeen = false;
        this.hintSeen = true;

        this.recordHour = parseInt(this.recordMillisecond / 3600000);
        this.recordMinute = parseInt(
          (this.recordミリ秒 % 3600000) / 60000
        );
        this.recordSecond = parseInt((this.recordMillisecond % 60000) / 1000);
        this.hint =
          「カウントダウン」+
          this.format(this.recordHour、this.recordMinute、this.recordSecond) +
          「終了しました」;
      }
    },
    カウントアップ: 関数() {
      this.ミリ秒 += 50;
      this.Hour = parseInt(this.Millisecond / 3600000);
      this.Minute = parseInt((this.Millisecond % 3600000) / 60000);
      this.Second = parseInt((this.Millisecond % 60000) / 1000);
      this.time = this.format(this.Hour、this.Minute、this.Second);
    },
    カウントダウン: 関数() {
      this.ミリ秒 -= 50;
      this.Hour = parseInt(this.Millisecond / 3600000);
      this.Minute = parseInt((this.Millisecond % 3600000) / 60000);
      this.Second = parseInt((this.Millisecond % 60000) / 1000);
      if (this.ミリ秒 <= 0) {
        タイマー間隔をクリアします。
        this.changeStatus(6);
      }
      this.time = this.format(this.Hour、this.Minute、this.Second);
    },
    startCountUp: 関数() {
      this.status = 2;
      this.ミリ秒 = 0;
      ステータスを変更します。
      this.timer = setInterval(this.CountUp, 50);
    },
    startCountDown: 関数() {
      this.status = 3;
      this.Hour = this.hour;
      (this.minute > 59) の場合 {
        this.Minute = 59;
      } それ以外 {
        this.Minute = this.minute;
      }
      （この秒数＞59）の場合{
        this.Second = 59;
      } それ以外 {
        this.second = this.second;
      }

      this.hour = null;
      this.minute = null;
      this.second = null;

      this.ミリ秒 =
        this.Hour * 3600000 + this.Minute * 60000 + this.Second * 1000;
      this.recordMillisecond = this.Millisecond;
      ステータスを変更します。

      this.timer = setInterval(this.CountDown, 50);
    },
    クリアカウンター: 関数() {
      this.status = 1;
      ステータスを変更します。
      タイマー間隔をクリアします。
      this.time = this.format(0, 0, 0);
    },
    一時停止カウンタ: 関数() {
      （このステータス == 2）の場合{
        // カウントアップします
        this.status = 4;
        ステータスを変更します。
        タイマー間隔をクリアします。
      } それ以外の場合 (this.status == 3) {
        // カウントダウン開始
        this.status = 5;
        ステータスを変更します。
        タイマー間隔をクリアします。
      }
    },
    再起動カウンタ: 関数() {
      （このステータス == 2 || このステータス == 4）の場合 {
        this.status = 2;
        this.ミリ秒 = 0;
        this.changeStatus(this.status);
        タイマー間隔をクリアします。
        this.timer = setInterval(this.CountUp, 50);
      } そうでない場合 ((this.status = 3 || this.status == 5 || this.status == 6)) {
        this.status = 3;
        this.Millisecond = this.recordMillisecond;
        ステータスを変更します。
        タイマー間隔をクリアします。
        this.timer = setInterval(this.CountDown, 50);
      }
    },
    resumeCounter: 関数() {
      （このステータスが4の場合）{
        this.status = 2;
        ステータスを変更します。
        this.timer = setInterval(this.CountUp, 50);
      } そうでない場合 ((ステータス = 5)) {
        this.status = 3;
        ステータスを変更します。
        this.timer = setInterval(this.CountDown, 50);
      }
    },
    //キーボードイベント handleKeyup(event) {
      const e = イベント || window.event || arguments.callee.caller.arguments[0];
      (!e) の場合、戻ります。
      const { キー、キーコード } = e;
      if (キー == "Enter") {
        （このステータス == 1）の場合{
          // 開始前
          this.status = 2;
          this.ミリ秒 = 0;
          ステータスを変更します。
          this.timer = setInterval(this.CountUp, 50);
        }
      } それ以外の場合 (keyCode == 32) {
        （このステータス == 2）の場合{
          // カウントアップします
          this.status = 4;
          ステータスを変更します。
          タイマー間隔をクリアします。
        } それ以外の場合 (this.status == 3) {
          // カウントダウン開始
          this.status = 5;
          ステータスを変更します。
          タイマー間隔をクリアします。
        } それ以外の場合 (this.status == 4) {
          this.status = 2;
          ステータスを変更します。
          this.timer = setInterval(this.CountUp, 50);
        } それ以外の場合 (this.status == 5) {
          this.status = 3;
          ステータスを変更します。
          this.timer = setInterval(this.CountDown, 50);
        }
      }
    }
  },
  マウント: 関数() {
    window.addEventListener("keyup", this.handleKeyup);
  },
  破壊された() {
    window.removeEventListener("keyup"、this.handleKeyup);
  },
  コンポーネント:
    カウンターボタン
  }
};
</スクリプト>

<スタイル>
体 {
  マージン: 0;
  パディング: 0;
}

.ツールバー{
  背景色: #97a5bc;
  幅: 1220ピクセル;
  高さ: 70px;
}

＃時間 {
  背景色: 白;
  境界線の半径: 5px;
  位置: 絶対;
  左: 40px;
  上: 15px;
  幅: 69px;
  高さ: 34px;
  フォントサイズ: 15px;
}

#時間ラベル {
  位置: 絶対;
  左: 86px;
  上: 24px;
  フォントファミリ: PingFangSC-Regular、「PingFang SC」、サンセリフ;
  フォントサイズ: 16px;
  色: #222222;
}

＃分 {
  背景色: 白;
  境界線の半径: 5px;
  位置: 絶対;
  左: 130px;
  上: 15px;
  幅: 69px;
  高さ: 34px;
  フォントサイズ: 15px;
}

#分ラベル {
  位置: 絶対;
  左: 177px;
  上: 24px;
  フォント ファミリ: PingFangSC-Regular、「PingFang SC」、サンセリフ;
  フォントサイズ: 16px;
  色: #222222;
}

＃2番 {
  背景色: 白;
  境界線の半径: 5px;
  位置: 絶対;
  左: 220px;
  上: 15px;
  幅: 69px;
  高さ: 34px;
  フォントサイズ: 15px;
}

#2番目のラベル{
  位置: 絶対;
  左: 268px;
  上: 24px;
  フォント ファミリ: PingFangSC-Regular、「PingFang SC」、サンセリフ;
  フォントサイズ: 16px;
  色: #222222;
}

＃時間 {
  位置: 絶対;
  左: 131ピクセル;
  上: 197px;
  フォントサイズ: 200px;
  フォント ファミリ: PTMono-Bold、「PT Mono」、等幅;
  フォントの太さ: 700;
  色: #333333;
}

#ヒント {
  位置: 絶対;
  左: 40px;
  上: 24px;
  フォント ファミリ: PTMono-Bold、「PT Mono」、等幅;
  フォントサイズ: 16px;
  色: 白;
}
</スタイル>

最後にディレクトリで使用