[ 자바스크립트 ] 랜덤으로 색상 및 글자 크기 바꾸기

최종 수정일 : 2016. 4. 27.

[ 자바스크립트 ] 랜덤으로 색깔 및 글씨 크기 바꾸기

위의 버튼을 누를 때마다, 배경색이 바뀌는 영역.

글자색이 바뀌는 영역.

글자 크기가 바뀌는 영역.

 
<button onclick="change_at_random()"> 클릭하세요 </button>

<p id="bgcolor"> 위의 버튼을 누를 때마다, 배경색이 바뀌는 영역. </p>

<p id="fontColor"> 글자색이 바뀌는 영역. </p>

<p id="fontSize" style="line-height: 1.3em;"> 글자 크기가 바뀌는 영역. </p>

 

 
<script type="text/javascript">

function get_random_integer ( min, max ) { 	 return Math.floor ( Math.random() * (max - min + 1) ) + min; 	 } 

function get_random_hexColor () { 

	 var color = "#"; 
         var max = Math.pow( 256, 3 ); 
	 var random = Math.floor( Math.random() * max ).toString( 16 ); 
	 var gap = 6 - random.length; 

	 if ( gap > 0 ) {    for ( var x = 0; x < gap; x++ ) color += "0";    } 

	 return color + random; 
} 
 

 
function change_at_random () { 

	 // RGB 값으로 색상 바꾸기 ─────────────────────────────────── 

	 var R = get_random_integer ( 0, 255 ); 	 // 최소 = 0, 최대 = 255 
	 var G = get_random_integer ( 0, 255 ); 
	 var B = get_random_integer ( 0, 255 ); 

	 var rgbColor = "rgb(" + R + "," + G + "," + B + ")"; 

	 document.getElementById ( "bgcolor" ).style.backgroundColor = rgbColor; 

	 // 헥사값으로 색상 바꾸기 ─────────────────────────────────── 

	 document.getElementById ( "fontColor" ).style.color = get_random_hexColor(); 

	 // 글자 크기 바꾸기  ─────────────────────────────────── 

	 var size = get_random_integer ( 12, 40 ); // 최소 12, 최대 40 

	 document.getElementById ( "fontSize" ).style.fontSize = size + "px"; 
} 

</script>
 

---

추가로, 배열 안에서 랜덤으로 가져오는 함수는 다음과 같다.

 
function get_random_in_array ( myArray ) {   return myArray [ Math.floor ( Math.random() * myArray.length ) ];   } 
 

이 블로그에서 함께 볼만한 글 ☞ [ 자바스크립트 ] 랜덤으로 이미지 바꾸기

이 내용이 도움이 되셨나요? *^^*