Vue를 사용하여 Pomodoro 타이머를 구성합니다.코드 펜의 js

나는 Scotch.io의 도전에 주목한 지 오래되어 내가 매우 흥미를 느끼는 시도를 보았다.Scotch.io Challenge #6의 Pomodoro 타이머입니다.내 기술을 시험해 보고 싶었는데, 이걸 시험해 보고 싶었어.

설치 프로그램

설정은 매우 간단합니다. 이미 codepen(이하 아래)이 있어서 모든 필요한 html과 css 작업을 완성했습니다.내가 곧 완성할 주요 업무에서 이 도전의javascript 부분을 시작할 때가 되었다.
이 비밀번호 펜이 고장났다

첫걸음

내가 하고 싶은 첫 번째 일은 내가 필요로 하는 모든 변수로 나의 데이터를 설정하는 것이다.

data: {
    message: 'Let the countdown begin!!',
    timerRunning: false
}

이것은 단지 제 메시지에 변수를 만들었을 뿐입니다. 이것은 타이머의 상태와 타이머가 활동하거나 일시 정지 상태에 따라 달라집니다.이러한 상태는 타이머 카운트다운과 관련된 방법을 만드는 데 매우 중요하다.
이러한 방법과 버튼 사이의 관계는 매우 자연스럽다.나는 클릭할 때마다 실행되는 단추에 방법을 추가해야 한다.이 요구 사항에는 4개의 단추가 필요합니다. (시작, 일시 정지, 복구, 리셋)
시작 버튼이 카운트다운을 켜고 타이머가 실행되기 때문에 timerRunning: true을 설정합니다.일시 중지 버튼은 카운트다운을 동결하고 timerRunning: false을 중지합니다.복구 버튼은 현재 시간과 속도에 따라 카운트다운을 다시 시작하고 timerRunning: true을 실행합니다.마지막으로 리셋 버튼은 카운트다운을 시작 숫자로 설정하여 timerRunning: false으로 설정합니다.
이것은 우리가 방금 토론한 기능과 관련된 방법의 원시 코드다.일부 상태를 바꾸는 정보를 포함합니다.

methods: {
    timerRun() {
      this.timerRunning = true;
      this.message = 'Greatness is within sight!!!';
    },
    timerPause() {
      this.message = 'Never quit, keep going!!';
      this.timerRunning = false;
    },
    timerReset() {
      this.message = 'Let the countdown begin!!';
      this.timerRunning = false;
    },
    timerCountdown() {
      this.timerRunning = true;
    }
  }

어떤 단계의 메시지를 바꾸기 위해서, 나는 위에 표시된 방법을 아래에 표시된 단추에 연결합니다. 이것은 다른 동작을 촉발합니다.버튼을 누르면 타이머 실행 중, 타이머 일시 중지, 타이머 재설정 또는 타이머 실행 중이 표시될 수 있습니다.변수 timerRunning은 장면에서 변화가 발생하는데 이것은 현재 보이는 단추 설정을 바꾸고 v-if 기능을 사용합니다.그래서 버튼의 기능을 고려해 타이머가 제대로 작동할 때가 됐다.

<div class="buttons">
      <button @click="timerRun" v-if="!timerRunning">Start</button>
      <button @click="timerPause" v-if="timerRunning">Pause</button>
      <button @click="timerReset" v-if="timerRunning">Restart</button>
</div>

내가 타이머를 만들러 갔을 때, 나는 카운트다운 코드를 어떻게 만드는지 정말 몰랐고, 타이머를 만드는 기본 원리를 이해하지 못했다는 것을 깨달았다.어떻게 작동해야 하는지 알기 위해 나는 빠르게 방향을 벗어나 시계를 만들었다.
나는 밀리초를 모든 시계 동작의 기초로 어떻게 사용하는지, 어떻게 점차적으로 시간을 조정하는지, 그리고 시간, 분, 초와 밀리초를 표시하는지 배웠다.이 부대 항목에서 나는 시간 관리에 관한 지식을 많이 배웠는데 시간의 전진이나 후퇴와 관련된다.
카운트다운을 할 때 내가 겪는 주요 문제는 시간이 계속 이동하는 것이다.처음 만들 때 시작/복구 버튼을 누를 때마다 카운트다운이 증가합니다.이것은 예상한 결과가 아니며, 네가 회복해야 할 일에 불리하다.이 시계를 만든 후에 나는 더욱 일치된 촉발 타이머가 작동하는 방법을 실현했다.

data {
    interval: null
},
methods: {
    timerRun() {
      this.timerRunning = true;
      this.message = 'Greatness is within sight!!!';
      this.interval = setInterval(this.countdownTimer, 1000);
    }
    timerPause() {
      this.message = 'Never quit, keep going!!';
      this.timerRunning = false;
      clearInterval(this.interval);
    },
    timerReset() {
      this.message = 'Let the countdown begin!!';
      this.timerRunning = false;
      clearInterval( () => { this.interval; });
    }
}

이 코드는 첫 번째 실행에서 후속 복구까지의 카운트다운에서 일치성을 유지하는 데 매우 중요하다.현재 타이머가 시작되면 새로운 this.interval이 카운트다운을 시작합니다.일시 중지하고 재설정하면 해당 변수가 지워지고 카운트다운이 일시 중지되며 변수가 서로 중첩되지 않습니다.
타이머를 카운트다운시키는 것은 많은 수학을 이해하는 긴 길이다. 유감스럽게도 나는 이 방면에서 매우 나쁘다.마지막으로 나는 시간의 해석을 - 시간은 60*60*60, 분은 60*60, 밀리초는 60으로 분해해야 한다.그러니까 밀리초와 시간 단위로(만약 내가 설명을 잘 하지 못한다면, 나는 미안하다. 나의 수학은 매우 나쁘다.
지금 카운트다운의 또 다른 문제는 마이너스에 들어가지 않는 것이다.아래의 설명에 의하면 이것이 바로 시간이 마이너스로 변하지 않은 이유이다. (그것은 확실히 마이너스로 변했지만 우리는 표시하지 않았다.)

timerCountdown() {
      console.log('Working');
      this.timerRunning = true;
      this.interval = setInterval(this.updateCurrentTime, 1000);
      // Counts down from 60 seconds times 1000.
      setInterval( () => {
        this.timerMinutes--
      }, 60 * 1000)

      // Check if seconds at double zero and then make it a 59 to countdown from.
      // need another method of checking the number while in the loop and then adding a zero on the number under 10
      if(this.timerSeconds === '00'){
        this.timerSeconds = 59;
        setInterval( () => {
          this.timerSeconds--
        }, 1000);
      } else {
        setInterval( () => {
          this.timerSeconds--
        }, 1000);
      }
    },

It does go into negatives in his solution. You could include a simple check if time <= 0 to reset and stop the timer. And how it stays in 60 seconds is just maths. He converts the rounded minutes into seconds and subtracts them from the total time (in seconds). So what will be left are seconds between 0 and 60.
This could be shortened and cleared up using modulo.
this.totalTime % 60
This will always leave the remainder of a number 0 - 60.
Thanks to Zammy13 for answering my question

modulo(남은 비율)의 세분화.

롤 니스켄스
@pixelambacht

나는 이 점을 깨달았다.내가 'X% Y' 를 보았을 때, 나는 보통 'X에서 Y를 빼고 Y보다 작을 때까지 계속 빼라.' 라고 생각한다.11%3:11-3=8(네, 8은 3보다 크고, 계속)8-3=5(네, 5도 3보다 크고, 계속)5-3=2(3보다 작기 때문에'답'은 2)
2018년 3월 20일 오후 19:59
나의 타이머는 25분이 걸리기 때문에 나는 이것으로 totalTime: (25 * 60)을 대체한다.이는 총 시간(25분)에 60을 곱한 것과 초수와 같다.총 시간은 1500초입니다.

computed: {
     time: function() {
      return this.minutes + " : " + this.seconds;
    },
    hours: function() {
      var milli = this.milliseconds;
      // var hrs = new Date().getHours();
      // Used getHours() since the below didn't work for me
      var hrs = Math.floor((milli / 3600000) % 24);
      if (hrs >= 13) { hrs = hrs - 12 }
      return hrs >= 10 ? hrs : '0' + hrs;
    },
    minutes: function() {
      var min = Math.floor(this.totalTime / 60);
      return min >= 10 ? min : '0' + min;
    },
    seconds: function() {
      var sec = this.totalTime - (this.minutes * 60);
      return sec >= 10 ? sec : '0' + sec;
    }
  }

마지막 단계는 카운트다운이 카운트다운을 하고 있다는 것을 확인하는 것이다.이것은 아마도 전체 과정 중 가장 간단한 부분일 것이다. 변수 timerRunning == true을 검사한 후에 1밀리초를 제거하면 된다.

countdownTimer() {
      if (this.timerRunning == true) {
          this.totalTime--;
      }
    }

종점

이것은 내가 상상한 것보다 훨씬 긴 길이다.마지막으로 나는 모든 방울과 휘파람으로 뭔가를 만들고 싶은 기본적인 것들을 만들었다.pomodoro 기술에 있는 위치와 시각적으로 더 재미있는 것을 알려줍니다.
도전의 마지막 코드 펜
이 코드 펜에는 가속 카운트다운을 포함한 많은 문제가 있다.나는 내 개인 버전의 타이머에서 이 문제를 복구했다.이렇게 하는 것은 하나의 목표를 달성하기 위해서이다. 이것이 바로 도전의 마감일이다.내 고급 타이머의 두 번째 부분이 있을 거야.