[JavaScript] math

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>math</title>

<style type="text/css">

#circle{
	border: 1px solid red;
	display: none;
}

</style>

<script type="text/javascript">

	function randomNum(){
		var rnum = Math.floor(Math.random()*10 + 1);
		document.getElementById("rnum").value = rnum;
	}
	
	
	function randomBg(){
		// style 색상 표현 : rgb(0~255,0~255,0~255)
		
		var rnum = function(){
			return Math.floor(Math.random()*256);
		}
		
		document.body.style.backgroundColor="rgb(" + rnum() + ", " + rnum() + ", " + rnum() + ")";
	}
	
	
	function circleView(){
		var rnum = Math.floor(Math.random() * 200);
		var circle = document.getElementById("circle");
		circle.style.width = rnum + "px";
		circle.style.height = rnum + "px";
		
		circle.style.borderRadius = Math.floor(rnum/2) + "px";
		circle.style.display = "block";
	}
	
	
	function circleArea(){
		var circleWidth = document.getElementById("circle").style.width;
		
		// 지름
		var r2 = parseInt(circleWidth);
		
		// 반지름
		var r = Math.floor(r2/2);
		
		var area= Math.PI * (Math.pow(r, 2));
		var len = Math.PI * r * 2;
		
		document.getElementById("area").innerHTML = Math.round(area);
		document.getElementById("len").innerHTML = Math.round(len);

	}

</script>


</head>
<body>

	<h1>랜덤 숫자 생성하기</h1>
	
	<label>숫자 : </label>
	<input type="text" id="rnum" readonly="readonly">
	<input type="button" value="난수발생" onclick="randomNum();">
	
	
	
	<h1>랜덤으로 배경색 설정하기</h1>
	<input type="button" value="배경색 변경" onclick="randomBg();">
	
	
	
	<h1>원 만들기</h1>
	<input type="button" value="원 만들기" onclick="circleView();"><br>
	<br><br><br><br><br>
	<div id="circle"></div>
	
	
	
	
	<h1>원의 넓이, 둘레 구하기</h1>
	<input type="button" value="원 계산" onclick="circleArea();"><br>
	
	원의 넓이 : 
	<span id="area"></span><br>
	원의 둘레 : 
	<span id="len"></span>
	
	<!-- 넓이 : 파이 * r 제곱 / 둘레 : 2 * 파이 * r -->	
	
</body>
</html>

function randomNum(){
	var rnum = Math.floor(Math.random()*10 + 1);
	document.getElementById("rnum").value = rnum;
}

이 함수는 1부터 10까지 랜덤으로 숫자를 태그이름이 rnum인 곳에 출력해줍니다!

function randomBg(){
	// style 색상 표현 : rgb(0~255,0~255,0~255)
		
	var rnum = function(){
		return Math.floor(Math.random()*256);
	}
		
	document.body.style.backgroundColor="rgb(" + rnum() + ", " + rnum() + ", " + rnum() + ")";
}

이 함수는 0부터 255까지의 숫자를 랜덤으로 발생시켜 배경색을 변경해줍니다!

따라서 배경색이 랜덤으로 주어집니다!

function circleView(){
	var rnum = Math.floor(Math.random() * 200);
	var circle = document.getElementById("circle");
	circle.style.width = rnum + "px";
	circle.style.height = rnum + "px";
		
	circle.style.borderRadius = Math.floor(rnum/2) + "px";
	circle.style.display = "block";
}

랜덤 크기의 원을 생성하는 함수입니다!

function circleArea(){
	var circleWidth = document.getElementById("circle").style.width;
		
	// 지름
	var r2 = parseInt(circleWidth);
		
	// 반지름
	var r = Math.floor(r2/2);
		
	var area= Math.PI * (Math.pow(r, 2));
	var len = Math.PI * r * 2;
		
	document.getElementById("area").innerHTML = Math.round(area);
	document.getElementById("len").innerHTML = Math.round(len);
}

램던으로 만들어진 원의 넓이와 둘레를 계산해주는 함수입니다!

728x90

'JS 관련 > JavaScript' 카테고리의 다른 글

[JavaScript] String(문자 index찾기, 문자열추출, 분리하기) (0)	2022.01.20
[JavaScript] String(문자열 합치기, 동등연산자(==), === 연산자 등) (0)	2022.01.19
[JavaScript] date(날짜) (0)	2022.01.17
[JavaScript] TransObject(형변환) (0)	2022.01.16
[JavaScript] NumberObject (0)	2022.01.15

'JS 관련 > JavaScript' 카테고리의 다른 글

티스토리툴바