# Vue.js でシンプルなストップウォッチを作ってみた

Math.floor(1000 % 1000); // 1000ミリ秒を計測
Math.floor(1000 / 1000) % 60; // 60秒を計測
Math.floor(60000 / 1000 / 60) % 60; // 60分を計測
Math.floor(3600000 / 1000 / 60 / 60) % 24; // 24時間を計測
Math.floor(86400000 / 1000 / 60 / 60 / 24) % 365; // 365日を計測
Math.floor(31536000000 / 1000 / 60 / 60 / 24 / 365); // 年

// 一部抜粋
new Vue({
  data: {
       // requestAnimationFrame(cb) の返り値（requestID）が入る
    animateFrame: 0,
    // 現在時刻
    nowTime: 0,
    // 現在時刻 と スタートボタンを押した時刻 の差
    diffTime: 0,
    // スタートボタンを押した時刻
    startTime: 0,
    // タイマーが走っているか判定
    isRunning: false
  },
  methods: {
    // 現在時刻から引数に渡した数値を startTime に代入
    setSubtractStartTime: function (time) {
      var time = typeof time !== 'undefined' ? time : 0;
      // performance.now() が返すタイムスタンプは Date.now() よりも精度が高い
      this.startTime = Math.floor(performance.now() - time);
    },
    // タイマーをスタートさせる
    startTimer: function () {
      // loop()内で this の値が変更されるので退避
      var vm = this;
      vm.isRunning = true;
      vm.setSubtractStartTime(vm.diffTime);
      // ループ処理
      (function loop(){
        vm.nowTime = Math.floor(performance.now());
        vm.diffTime = vm.nowTime - vm.startTime;
        vm.animateFrame = requestAnimationFrame(loop);
      }());
    },
    // タイマーを停止させる
    stopTimer: function () {
      this.isRunning = false;
      cancelAnimationFrame(this.animateFrame);
    }
  }
  // 以下省略...
});

new Vue({
  // 一部抜粋
  methods: {
    // 計測中の時間を配列に追加
    pushTime: function () {
      this.times.push({
        // computed で定義した hoursの値
        hours: this.hours,
        // computed で定義した minutesの値
        minutes: this.minutes,
        // computed で定義した secondsの値
        seconds: this.seconds,
        // computed で定義した milliSecondsの値
        milliSeconds: this.milliSeconds
      });
    }
  },
  computed: {
    // 時間を計算
    hours: function () {
      return Math.floor(this.diffTime / 1000 / 60 / 60);
    },
    // 分数を計算 (60分になったら0分に戻る)
    minutes: function () {
      return Math.floor(this.diffTime / 1000 / 60) % 60;
    },
    // 秒数を計算 (60秒になったら0秒に戻る)
    seconds: function () {
      return Math.floor(this.diffTime / 1000) % 60;
    },
    // ミリ数を計算 (1000ミリ秒になったら0ミリ秒に戻る)
    milliSeconds: function () {
      return Math.floor(this.diffTime % 1000);
    }
  }
});

filters: {
  // ゼロ埋めフィルタ 引数に桁数を入力する
  // ※ String.prototype.padStart() は IEじゃ使えない
  zeroPad: function(value, num){
    var num = typeof num !== 'undefined' ? num : 2;
    return value.toString().padStart(num,"0");
  }
}