本项目主要实现功能：
用户输入本金、利率、年限，计算出相应复利。
复利公式：p（i + 1）^n
p：本金
i：利率
n：年限
本项目涉及的主要知识点：
- HTML表单的<input>元素
- HTML DOM方法
实现原理：
通过<input>元素接收用户输入的数据，
利用JS获取本金、利率和年限等数据然后计算复利，
最后输出。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复利计算器</title>
<link rel="stylesheet" href="common.css">
</head>
<body>
<div id="inputArea">
<form action="">
本金：
<input type="number" placeholder="1000元" id="p">
<br>
利率：
<input type="number" placeholder="10%" id="r">
<br>
年限：
<input type="number" placeholder="1年" id="y">
<br>
<input type="submit" value="提交" onclick="compute()">
</form>
</div>
<script type="text/javascript">
//
var form = document.getElementById("inputArea");
form.style.left = window.innerWidth / 2.5 + "px";
form.style.top = window.innerHeight / 2.5 + "px";
//计算复利并输出
function compute(){
var p = document.getElementById('p').value; //本金
var r = document.getElementById("r").value / 100; //利率
var y = document.getElementById("y").value; //持有年限
var i = (p * Math.pow(r+1,y)).toFixed(2); //计算复利，公式：p（r+1）^y
var inte = i - p; //利息
document.write("本金：" + p + "元");
document.write("<br><br>利率：" + r*100 + "%");
document.write("<br><br>" + "年限：" + y +"年");
document.write("<br><br>复利："+ i +"元");
document.write("<br><br>其中利息为："+ inte.toFixed(2) + "元");
}
</script>
</body>
</html>
#inputArea{
position: absolute;
width: 250px;
height: 270px;
background-color:grey;
}
input{
width: 100px;
margin-top: 16px;
margin-bottom: 16px;
}
form{
text-align: center;
margin-top:30px;
}
浙公网安备 33010602011771号