랜덤값을 자유자재로 만들 수 있는 라이브러리 Rando.js

 

 

자바스크립트에서 랜덤값을 만들기 위해서는 내장함수, random()을 사용하다. 그런데 이 랜덤함수의 사용법을 극대화시킨 라이브러리가 있다. 

 

---

Rando.js

 

https://github.com/nastyox/Rando.js

nastyox/Rando.js

 

Rando.js는 이름에서 보듯 랜덤값을 의미한다. 자바스크립트의 random()내장 메서드와 같은 기능을 하며, 순정에 비해 좀더 감각적인 디자인과 효과를 구현할 수 있다. 직접 적용을 해보자.

 

---

구현

rando.js의 cdn을 적용하고, 기본 랜덤함수를 실행한다.

<script src="https://randojs.com/1.1.0.js"></script>

예제로 소개한 자료 중에서 다소 신기한 배열을 테스트해보자.

 rando()            
 rando(5)                
 rando(5, 10)           
 rando(5, "float")       
 rando(5, 10, "float") 
 rando(true, false)     
 rando(["a", "b"])     
 rando({a: 1, b: 2})   
 rando($("div"))         
 rando("Gee willikers!")
 rando(null)            

 

showRand()함수는 rando([배열])함수를 통해 '락', '힙합', '발라드' value를 return한다. rando()의 인자값으로는 숫자, 문자열, 배열, 객체 등 다양한 값을 넣을 수가 있는데(위의 코드 참조), value나 index값을 랜덤으로 return할 수 있다. 

 

 

<div id="rand1" style="font-size: 42px; text-align: center;"></div>

<script>
   function showRand(){
      return rando(["락","힙합","발라드"]);
   }
  let randDiv = document.getElementById('rand1');
  
  
  setInterval(function(){
    randDiv.innerHTML = ``;
    randDiv.innerHTML += `${showRand().value}`;
  },1200)
  
</script>

 

 

rando()를 조금 응용해서 이미지 경로를 랜덤값으로 넣는다면, 무작위로 변경되는 콘텐츠를 추가할 수도 있고 로또복권 같은 추천기는 아주 간단하게 제작할 수 있다. rando.js를 단독으로 사용해서 뭔가 프로그램을 만들기에는 계륵같은 면이 있다. 하지만 촉매제같은 역할로 사용하기에는 괜찮다.