IT/프로그램 | 앱

주식 일복리 계산기를 만들어 봅시다.

DKSOFT 2019. 7. 17.

우리는 가끔 행복한 고민을 해봅니다.

 

주식 투자를 해서 하루 1% 씩 수익을 일복리로 창출 한다면 1년 후 아주 흐뭇하게 웃음 짓게 될 것이라고

 

그래서 html 과 javascript 로 간단한 일복리 계산기를 한번 만들어 봅니다. ^^

 

우선 원금과 , 이율 , 기간을 입력 받을 수 있는 껍데기를 만들어 줍니다.

계산버튼을 클릭하면 계산이 되도록 껍데기를 이렇게 만들어 줍니다. 

결과물을 볼 수 있는 div 도 하나 만들어 줍니다.

 

아래 코드에서 보면 계산 버튼은 submit 타입의 버튼이고 클릭시에

자바스크립트의 interest 함수가 호출 되는걸 볼 수 있습니다.

파라미터로 원금 , 이율 , 기간을 넘기고 있는것도 볼 수 있습니다. (action 부분)

<form method="POST" action="javascript:interest(f_data.i_principal.value , f_data.i_interest.value , f_data.i_period.value);" id="f_data" class="f_data">
<table>
	<tr>
		<td>원금 :</td>
		<td><input type="text" name="i_principal" value="1000000"> </td>
	</tr>
	<tr>
		<td>이율 :</td>
		<td><input type="text" name="i_interest" value="1"> %</td>
	</tr>
	<tr>
		<td>기간 :</td>
		<td><input type="text" name="i_period" value="240"></td>
	</tr>
	<tr>
		<td align="center" colspan=2><input type="submit" value="계산"></td>
		<td></td>
	</tr>
</table>
</form>

<!--계산 결과물이 나오는 Layer-->
<div id="divResults">
</div>

그리고 자바스크립트 interest 함수를 만들어 줍니다.

jquery 는 코딩의 편의성을 위해서 import 해줍니다.

 

복리 계산식

원금*(1+이율)^기간

 

입력 기간까지  단위로 수익금을 산출하기 위해서 반복문을 사용하고

Math.pow 제곱근을 구하는 함수로 복리공식을 적용 시킨뒤

총금액 , 수익금 , 수익률 을 산출 합니다.

 

그리고 결과를 보여 주기 위해서 반복문에 의해 만들어진 html 을

div 레이어에 html 를 추가 시켜 줍니다.

 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	function interest(i_principal ,  i_interest , i_period) {
		$("#divResults").html("");
		var html = "<table border=1><tr align=center><td width=50>횟차</td><td width=200>금액</td><td width=150>수익금</td><td width=100>이율</td></tr>";
		for(var i = 1 ; i <= i_period ; i++) {
				var result = i_principal * Math.pow((1+(i_interest/100)),i);
				var benerfitAmt = Math.round(result - i_principal);
				var benerfitRate = benerfitAmt /i_principal * 100.00;
				html += '<tr align=center><td>' + i +'</td><td align=right>' + Math.floor(result).toLocaleString() + '</td><td align=right>' + benerfitAmt.toLocaleString() + '</td><td align=right>'+ benerfitRate.toFixed(2) +'%</td></tr>';
		}
		html += '</table>';
		$('#divResults').append(html);
	}
</script>

 

 

짜잔!! 

아래와 같이 결과물이 산출 되는걸 볼 수 있습니다.

 

주식 일복리계산기 (실행 Version)

http://smilebomb.shop/gb/bbs/board.php?bo_table=stockcode&wr_id=1

 

html 전체 소스

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>디케이랩 주식 복리 계산기</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	function interest(i_principal ,  i_interest , i_period) {
		$("#divResults").html("");
		var html = "<table border=1><tr align=center><td width=50>횟차</td><td width=200>금액</td><td width=150>수익금</td><td width=100>이율</td></tr>";
		for(var i = 1 ; i <= i_period ; i++) {
				var result = i_principal * Math.pow((1+(i_interest/100)),i);
				var benerfitAmt = Math.round(result - i_principal);
				var benerfitRate = benerfitAmt /i_principal * 100.00;
				html += '<tr align=center><td>' + i +'</td><td align=right>' + Math.floor(result).toLocaleString() + '</td><td align=right>' + benerfitAmt.toLocaleString() + '</td><td align=right>'+ benerfitRate.toFixed(2) +'%</td></tr>';
		}
		html += '</table>';
		$('#divResults').append(html);
	}

</script>

<body>
<form method="POST" action="javascript:interest(f_data.i_principal.value , f_data.i_interest.value , f_data.i_period.value);" id="f_data" class="f_data">
<table>
	<tr>
		<td>원금 :</td>
		<td><input type="text" name="i_principal" value="1000000"> </td>
	</tr>
	<tr>
		<td>이율 :</td>
		<td><input type="text" name="i_interest" value="1"> %</td>
	</tr>
	<tr>
		<td>기간 :</td>
		<td><input type="text" name="i_period" value="240"></td>
	</tr>
	<tr>
		<td align="center" colspan=2><input type="submit" value="계산"></td>
		<td></td>
	</tr>
</table>
</form>
<div id="divResults">
</div>
</body>
</html>

 

댓글

💲 추천 글