[JS-015] 스톱워치

스톱워치

*이번 시간에는 HTML/CSS/JS를 이용하여 스톱워치를 만들어 보도록 하겠습니다.

 

[1] HTML은 다음과 같이 코딩을 합니다. 코딩할 양이 적고 아주 쉽습니다.

[2] 위의 HTML 코드를 실행한 결과는 다음과 같습니다.

 

[3] 스톱워치를 작동시키기 위해서는 자바스크립트 코드를 작성해야 합니다. 다음과 같이 코딩해 주세요.

 

let seconds = 0;      // seconds
let centiseconds = 0; // 1/100 seconds
let spanSeconds = document.getElementById('seconds');
let spanCentiseconds = document.getElementById('centiseconds');
let buttonStart = document.getElementById('button-start');
let buttonStop = document.getElementById('button-stop');
let buttonReset = document.getElementById('button-reset');
let interval;  // 1/100 초씩 자동실행되는 곳에 사용할 변수
 
// 시작버튼 누를시 실행함수
buttonStart.onclick = function() {
  if(buttonStart.disabled == false) {     // start버튼이 활성화 되었다면(여러번 실행되는 것 방지)
    interval = setInterval(startTimer, 10); // startTimer함수를 10/1000초마다 실행하겠다.
    buttonStart.disabled = true;      // start버튼을 비활성화 하기
  }
}
 
// 정지버튼을 누를시 실행함수
buttonStop.onclick = function() {
  clearInterval(interval); // 1/100초마다 실행되는 함수 멈춤
  buttonStart.disabled = false; // start 버튼을 활성화 하기
}
 
// 재시작 버튼 누를시 실행함수
buttonReset.onclick = function() {
  buttonStart.disabled == false;  // start 버튼을 활성화하기
  clearInterval(interval); // 1/100초마다 실행되는 함수 멈춤
  centiseconds = 0;
  seconds = 0;
  spanCentiseconds.innerText = '00';
  spanSeconds.innerText = '00';
}
 
function startTimer() { // 1초, 2초......시간 계산하는 함수
  centiseconds++;  // 1증가 // centiseconds = centiseconds + 1
  if(centiseconds <= 9) spanCentiseconds.innerText = '0'+centiseconds;
  else spanCentiseconds.innerText = centiseconds;
 
  if(centiseconds > 99) {
    seconds++; // 1초 상승
    if(seconds <= 9) spanSeconds.innerText = '0' + seconds;
    else spanSeconds.innerText = seconds;
    centiseconds = 0;
    spanCentiseconds.innerText = '00';
  }
}

 

[4] 위의 자바스크립트를 작성하고 실행하면 아래와 같이 "시작", "정지", "재시작" 버튼을 누를시 작동이 잘 되는 것을 확인할 수 있습니다.

 

[5] 이제 JS에 의해 스톱워치가 작동되기 때문에 다음과 같이 CSS로 화면을 꾸며주겠습니다.

 

[6] 위의 CSS코드까지 모두 코딩하여 실행하면 아래와 같이 나타날 것입니다.

 

[7] 아래 codepen에서 풀코드를 확인하고, 실행도 해보실 수 있습니다.

 

See the Pen JS_Stop_Watch by wootekken (@wootekken) on CodePen.

 

[퀴즈] 위에서 만든 스톱워치의 디자인을 아래와 같이 바꿔 보세요.

(1) "스톱워치" 글자색을 검정색으로 바꾸기 (2) "00:00" 에서, 앞에 "00"은 빨간색, 뒤에 "00"은 파란색으로 바꾸기 (3) 콜론( : ) 부분은 초록색, 굵게 바꾸기 (3) 버튼(시작,정지,재시작)의 꼭지점(90도 각진 부분)을 약간 둥글게 만들기 (4) 화면 전체 배경색깔을 코랄(coral)색으로 바꾸기

 

퀴즈 답 확인

See the Pen JS_Stop_Watch-Fork by wootekken (@wootekken) on CodePen.