크롬 확장프로그램 Time Timer 개발하기 - 3

이제 시간을 입력하고 시작버튼을 누르면 타이머가 동작되도록 해보겠습니다.

 

popup.html은 변경없이 script.js에 코드를 추가해주겠습니다.

 

버튼 클릭 시 타이머가 실행되고 1초마다 바탕원을 다시 그리고 새로운 호를 그리게 되는 코드입니다.

window.onload=draw;

function draw(){
  var ctx=document.getElementById('myCanvas').getContext('2d');
  background();
  // 바탕 원
  submit_btn.onclick = function() {
    var min = document.getElementById('minute').value;
    var time = min*60;
    var end = (45-(time/60))*6;
    var timer = setInterval(function() {
      time--;	// 1분 경과 시 min 1씩 감소
      end = (45-(time/60))*6;
      background();   // 매번 새로 바탕 원을 다시 그려줌
      ctx.beginPath();
      ctx.moveTo(150,150);
      ctx.arc(150,150,100,(Math.PI/180)*270,(Math.PI/180)*end, false);
      ctx.fillStyle = "rgb(255,255,255)";
      ctx.fill();
      ctx.closePath();
      // 원 안의 부채꼴
    },1000);   // 1초 간격으로 draw_time 실행
  }
  function background() {
    ctx.beginPath();
    ctx.arc(150,150,100,0,(Math.PI/180)*360, true);
    // ctx.arc(x,y, 반지름, 시작각도, 종료각도, 그리는 방향)
    // true = 반시계, false = 시계 방향
    ctx.fillStyle = "rgb(255,0,0)";
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
  } // 바탕 원 그리는 함수
}

시간에 30을 입력하고 시작을 누르면 시간이 지나면서 빨간 부분이 줄어드는 것을 볼 수 있습니다.