[HTML/CSS] 자바스크립트로 랜덤 구현하는 여러 방법 + 랜덤한 속도로 타이핑 효과 구현

이번 포스팅에서는 자바스크립트를 활용하여 랜덤한 딜레이로 텍스트를 출력하는 효과를 가진 타이핑 애니메이션을 만들어 보겠다. 이러한 애니메이션은 웹 페이지나 애플리케이션에서 독특하고 흥미로운 텍스트 효과를 적용할 때 유용한다. 먼저 멋진 효과를 가진 타이핑 애니메이션을 구현해보기 전에, 랜덤을 구현하는 방식은 여러 가지가 있는데 먼저 그것들에 대해 알아보자.

Math.random() 함수 사용하기

Math.random() 함수는 자바스크립트에서 가장 기본적으로 사용되는 함수 중 하나로, 0 이상 1 미만의 랜덤한 부동소수점 숫자를 반환한다. 이를 활용하여 원하는 범위의 랜덤 값을 구할 수 있다.

// 1에서 10 사이의 랜덤한 정수값 구하기
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const randomNumber = getRandomNumber(1, 10);
console.log(randomNumber); // 출력: 1에서 10 사이의 랜덤한 정수

 

Date 객체 활용하기

Date 객체는 자바스크립트에서 날짜와 시간에 관련된 정보를 다루는 기능을 제공하는 객체이다. 

Date 객체의 getTime() 메서드는 1970년 1월 1일 00:00:00(UTC)부터 현재까지 경과한 시간을 밀리초 단위로 반환한다. 이를 활용하여 랜덤한 정수를 생성하는 방법은 다음과 같다.

function getRandomNumberUsingDate() {
  return Math.floor(new Date().getTime() % 100);
}

const randomNumber = getRandomNumberUsingDate();
console.log(randomNumber); // 출력: 0에서 99 사이의 랜덤한 정수

 

배열 요소 랜덤 선택하기

ㄴㄴㅊㅁ배열에서 랜덤하게 요소를 선택하는 방법을 알아보자. 이를 위해 Math.random() 함수와 배열의 인덱스를 활용한다.

const fruits = ['사과', '바나나', '딸기', '오렌지'];

function getRandomFruit() {
  // 배열의 인덱스를 랜덤하게 선택
  const randomIndex = Math.floor(Math.random() * fruits.length);
  // 선택된 인덱스에 해당하는 요소를 반환
  return fruits[randomIndex];
}

const randomFruit = getRandomFruit();
console.log(randomFruit); // 출력: fruits 배열의 랜덤한 요소

위의 코드에서 getRandomFruit() 함수는 fruits 배열의 길이를 이용하여 0 이상 배열 길이 미만의 랜덤한 정수를 생성한다. 이 정수는 배열의 인덱스로 사용된다. 그리고 해당 인덱스에 위치한 과일 요소를 반환하여 랜덤하게 과일을 선택한다.

이 방법을 활용하면 배열의 요소들 중에서 무작위로 하나를 선택하는 간단하면서도 효과적인 방법을 구현할 수 있다. 예를 들어, 게임에서 랜덤한 아이템을 주거나, 퀴즈 앱에서 랜덤한 문제를 제공하는 등 다양한 상황에서 활용할 수 있다.

 

특정 숫자 당첨에 확률을 구현하기

아주 간단하다. 아래와 같이 특정 문자를 더 많이 넣으면 된다.

const fruits = ['사과','사과','사과','사과','사과','사과', '바나나', '딸기', '오렌지'];

 

랜덤한 딜레이로 텍스트 출력하는 효과를 가진 자바스크립트 타이핑 애니메이션 만들기

이제 랜덤의 기초적인 것들을 알아보았다.

먼저 텍스트가 들어가고 출력될 수 있는 간단한 공간을 HTML로 작성해 준다.

                     <div class="forms-sample">
                
                        <div class="form-group">
                          <label for="exampleTextarea1" id="2my-textarea">여기에 장문을 입력해주세요.</label>
                          <textarea class="form-control" id="my-textarea"  style="border-radius: 20px; border-color: rgb(246, 246, 246); background-color: rgb(246, 246, 246);" rows="10"></textarea>
                        </div>
                        <button id="replace-button" class="btn btn-primary mr-2" style="background-color: rgb(0, 110, 255);">변환!</button>
    
    
                      </br></br>
    
                        <div class="form-group">
     
                          <div id="textQ"></div>
                          
                        </div>
    
                      </div>
                    </div>

먼저, 우리가 원하는 랜덤한 딜레이를 가지고 있는 배열 randomDelays를 생성한다. 여기에는 원하는 시간 간격들과 랜덤하게 출력되길 원하는 값들을 포함시킬 수 있다. 예를 들면 [10, 12, 14, 18, 19, 20, 25, 30, 120]와 같이 여러 값들을 추가해준다.

그리고 아래의 자바스크립트 코드를 웹 페이지의 스크립트에 추가한다.

 
  <script>
    const randomDelays = [10, 12, 14, 18, 19, 20, 25, 30, 120, 120, 120, 120, 120, 120];
    let i = 0;

    function typeWriter() {
      if (i < greeting.length) {
        document.getElementById("textQ").innerHTML += greeting.charAt(i);
        i++;
        const randomIndex = Math.floor(Math.random() * randomDelays.length);
        const randomDelay = randomDelays[randomIndex];
        setTimeout(typeWriter, randomDelay);
      }
    }

    // typeWriter 함수 호출 (예시를 위해 greeting 변수 선언)
    const greeting = "Hello, World!";
    typeWriter();
  </script>

 

위 코드는 typeWriter라는 함수를 정의하여 setTimeout 함수를 활용하여 텍스트를 랜덤한 딜레이로 출력한다. randomDelays 배열에 등록된 값들 중에서 랜덤하게 딜레이를 선택하여 텍스트가 출력되는 속도를 다양하게 만들어준다.

이렇게 하면 웹 페이지에 랜덤한 딜레이로 텍스트가 타이핑되는 효과를 가진 자바스크립트 애니메이션을 구현할 수 있다.