<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>javscript loan calculator</title> </head> <style> /* 프로그램의 출력을 꾸며주는 css 스타일시트*/ .result{font-weight:bold;} /* class가 'result'인 엘리먼트*/ #payment{text-decoration:underline;} /* id가 payment인 엘리먼트*/ </style> <body> <form name="loandata"> <table> <tr><td><b>Enter Loan Information</b></td></tr> <tr> <td>1) Amount of the loan (any cyrrency):</td> <td><input type="text" name="principal" onchange="calculate();"></td> </tr> <tr> <td>2) Annual percentage rate of interest:</td> <td><input type="text" name="interest" onchange="calculate();"></td> </tr> <tr> <td>3) Repayment period in years :</td> <td><input type="text" name="years" onchange="calculate();"></td> </tr> <tr><td></td> <td><input type="button" value="compute" onclick="calculate();"></td> </tr> <tr><td><b>Payment information :</b></td></tr> <tr> <td>4) your monthly payment :</td> <td>$<span class="result" id="payment"></span></td> </tr> <tr> <td>5) your total payment :</td> <td>$<span class="result" id="total"></span></td> </tr> <tr> <td>6) your interest payment :</td> <td>$<span class="result" id="totalinterest"></span></td> </tr> </table> </form> <script language="javascript"> /* * 다음은 예제를 작동시키는 자바스크립트 함수를 보여준다. * 폼 내의 이벤트 처리기에 의해 호출되는 calculate() 함수를 정의하고 있다. * 이 함수에서는 앞의 HTML 코드에서 정의된 이름을 사용하여 폼의 input 필드들로 부터 * 값을 읽어온다. 계산 결과는 이름 붙은 <span> 엘리먼트 내에 출력된다. */ function calculate(){ // 폼에서 사용자 입력 값을 가져온다. 전부 정확한 값이라고 가정. // 이자율을 백분율에서 실진수로 변환하고 // 연 이자율을 월 이자율로 변환한다. // 상환 기간 연수를 월수로 변환한다 var principal = document.loandata.principal.value; var interest = document.loandata.interest.value / 100 / 12; var payments = document.loandata.years.value * 12;
// 이제 난해한 수식을 통해 월별 상환금을 계산한다. var x = Math.pow(1 + interest , payments); var monthly = (principal * x * interest) / (x-1);
// 폼에서 이름이 붙어 있는 <span> 엘리먼트를 가져온다 var payment = document.getElementById("payment"); var total = document.getElementById("total"); var totalinterest = document.getElementById("totalinterest");
// 결과가 유인한 값인지 검사한다. 만약 그렇다면 // 각 <span> 엘리먼트의 HTML 내용을 채워 넣어 결과를 보여준다 if(isFinite(monthly)){ payment.innerHTML = monthly.toFixed(2); total.innerHTML = (monthly * payments).toFixed(2); totalinterest.innerHTML = ((monthly * payments) - principal).toFixed(2); } // 그렇지 않다면, 사용자 입력이 정확하지 않았던 것이므로 아무것도 출력 하지 않는다. else{ payment.innterHTML = ""; total.interHTML = ""; totalinterest.innerHTML = ""; } } </script> </body> </html> | 
댓글