ウェブ学のすすめ

Study of Web Design & Programing

JavaScriptで作る複利計算プログラム

JavaScript

複利とは

複利（ふくり）とは、複利法によって計算された利子のこと。複利法とは、元金によって生じた利子を次期の元金に組み入れる方式であり、元金だけでなく利子にも次期の利子がつく。

新元金＝元金＋元金×利率　＝元金×(1＋利率)

引用：複利 - Wikipedia

金利の計算方法のひとつで、資金の貸借期間中、ある一定期間(半年や1年)ごとに利息を元本に組み入れ、その合計に対して利息を計算する方法のこと。

引用：複利とは - 意味/解説/説明/定義 ： マネー用語辞典

（例）100万円の元金に年3%の利子が複利でつく場合

利子合計金額
1年目100万円×0.03(3%)=3万円103万円
2年目103万円×0.02(3%)=3万900円106万900円
3年目106万900円×0.03(3%)=3万1,827円109万2,727円

プレビュー

PC版

JavaScriptで作る複利計算プログラム - jsdo.it - share JavaScript, HTML5 and CSS

スマートフォン版

JavaScriptで作る複利計算プログラム - js do it

コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>複利計算</title>
<style type="text/css">
body {
    font-family: 
	"Hiragino Kaku Gothic Pro",
	"ヒラギノ角ゴ Pro W3",
	Meiryo,
	"メイリオ",
	Osaka,
	"MS PGothic",
	"ＭＳ Ｐゴシック",
	sans-serif;
}
input {
    text-align: right;
}
table,th,td {
    border: 1px solid #000;
    border-collapse: collapse;
}
table {
    width: 320px;	
}
th {
    width: 120px;
    background-color: #2D89F0;
    color: #fff;
}
td {
    text-align: center; 
    background-color: #eee;
}
td.btn {
    text-align: center;
}
</style>
<script type="text/javascript">
document.myform.calc.onclick = Calculator;
document.myform.clear.onclick = TableClear;

function Calculator(){
    var rate,amount,period;
    
    rate = parseInt(document.myform.rate.value,10);
    amount = parseInt(document.myform.amount.value,10);
    period = parseInt(document.myform.period.value,10);
	
    document.myform.receipt.value = fukuri(rate,amount,period);
}

function fukuri(rate,amount,period){
    var receipt; 
    receipt = amount;
    
    var str="";
    str+="<table class=’test’>";
    str+="<tr><th>預入期間</th><th>受取金額</th></tr>";
    
    //預入金額＝元金×(1＋金利)/100
    //Math.round：小数点以下を四捨五入した整数値を返す
    for(var i=1; i<=period; i++){
	receipt = Math.round(receipt*(1+rate/100));
	str+="<tr><td>"+i+"年</td><td>"+receipt+"円</td></tr>";
	
    }
    str+="</table>";
    document.getElementById("result").innerHTML = str;
    return receipt;
}

function TableClear(){
    document.getElementById("result").innerHTML = "";
}
</script>
</head>
<body>
<h1>複利計算</h1>
<p>金利・金額・預入期間(年)を入力してください。</p>
<form name="myform">
<table>
    <tr>
	<th>金利</th>
	<td><input type="text" name="rate" size="22" value="4">％</td>
    </tr>
    <tr>
	<th>金額</th>
	<td><input type="text" name="amount" size="22" value="10000">円</td>
    </tr>
    <tr>
	<th>預入期間</th>
	<td><input type="text" name="period" size="22" value="10">年</td>
    </tr>
    <tr>
	<td colspan="2" class="btn">
	    <input type="button" name="calc" value="計算">
	    <input type="reset" name="clear" value="クリア">
	</td>
    </tr> 
    <tr>
	<th>受取金額</th>
	<td><input type="text" name="receipt" size="22">円</td>
    </tr>
</table>
</form>
<hr>
<div id="result">
</div>
</body>
</html>