Written by Nostrss
on March 06, 2022

[코드지갑#2] 난수 생성 후 타이머 작동하기

기능

난수번호 생성 버튼을 클릭하면 6자리의 난수가 생성된다.

난수가 생성되면 아래의 3분 타이머가 카운트 된다.

3분이 되면 카운트가 종료 된다.

카운트가 진행중에 버튼을 누르면 얼럿을 띄워준다.

예시

000000

03:00

HTML

<div id="auth">000000</div>
<button onclick="pressedBtn()">난수번호 생성</button>
<div id="count">03:00</div>

JAVASCRIPT

let isStarted = false;

const pressedBtn = () => {
  if (isStarted === false) {
    isStarted = true;
    const token = String(Math.floor(Math.random() * 1000000)).padStart(6, '0');
    document.getElementById('auth').innerText = token;
    document.getElementById('auth').style.color = '#' + token;

    let time = 180;
    let timer = null;

    timer = setInterval(function () {
      if (time >= 0) {
        const min = String(Math.floor(time / 60)).padStart(2, '0');
        const sec = String(time % 60).padStart(2, '0');
        const timerText = min + ':' + sec;
        document.getElementById('count').innerText = timerText;
        time = time - 1;
      } else {
        document.getElementById('auth__end').disabled = true;
        isStarted = false;
        clearInterval(timer);
      }
    }, 1000);
  } else {
    alert('타이머가 작동중입니다');
  }
};

난수 생성 방법

Math.random() 으로 0과 1사이의 소수점 난수를 구한다.
0과 1사이의 소수점 난수에 1,000,000을 곱해서 6자리 정수와 소수점 형태로 바꾼다.
- 예시 : 0.3782828282828 > 378282.8282828
소수점을 버려서 6자리의 숫자를 구한다.
이때 0.01111111과 처럼 0이 먼저 나오는 소수점의 경우에는 11111 처럼 5자리의 숫자가 되어버리게 된다.
padStart 메서드로 사라지는 0을 채워준다
- padStart 메서드 보기

타이머 생성

setInterval() 메소드를 사용한다.
- setInterval 메서드 보기

var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = setInterval(function[, delay]);
var intervalID = setInterval(code, [delay]);

func(함수)는 매번 delay시간 이후 실행된다.
delay는 밀리세컨즈 단위이고 디폴트는 0이다.
주의사항
- clearInterval()을 사용해 setInterval 메서드를 종료시켜 준다. 명시를 안하면 계속해서 작동된다.

← → Top