JavaScript系列教材（十八）- 语言基础 - 阶段性练习2-复利计算器

<style>
table{
 border-collapse:collapse;
}
td{
  border:1px silver solid;
  padding: 5px;
  font-size:12px;
}
input{
  width:180px;
}
</style>
<script>
/*取幂函数*/
function p(base, power){
	if(1==power)
	   return base
	if(0==power)
	   return 1;
	var result = base;
	for(var i = 0; i<power-1; i++){
		result = result*base;
	}
	return result;
}

/*取复利*/
function fuli(rate, year){
	var result = 0;
	for(var i=year;i>0;i--){
	  result+=p(rate,i);
	}
	return result;
}

function calc(){
	var initMoney= getNumberValue("initMoney");
	var rate= getNumberValue("rate") +0.0;
	var year= getNumberValue("year");
	var each= getNumberValue("each");
	var sum1 = (year-1)*each+initMoney;
	var sum3=each* fuli(  (1+rate/100),(year-1)) + initMoney*p( (1+rate/100) ,year);
	
	var sum2 = sum3-sum1;
	setValue("sum1",sum1);
	setValue("sum2",sum2);
	setValue("sum3",sum3);
}

function setValue(id,value){
	document.getElementById(id).value=value;
}

function getNumberValue(id){
	return parseFloat(document.getElementById(id).value);
}
</script>
<table>
<tr>
  <td>起始资金</td>
  <td><input type="text" id="initMoney" value='10000'> ￥</td>
<tr>
  <td>每年收益</td>
  <td><input type="text" id="rate" value='5'> %</td>
</tr>
<tr>
  <td>复利年数</td>
  <td><input type="text" id="year" value='10'> 年</td>
</tr>
<tr>
  <td>每年追加资金</td>
  <td><input type="text" id="each" value='10000'> ￥</td>
</tr>
<tr>
   <td colspan="2" align="center"><input type="button" value="计算" onclick="calc()"></td>
</tr>
<tr>
  <td>本金和</td>
  <td><input type="text" id="sum1" disabled="disabled"  value='0'> ￥</td>
</tr>
<tr>
  <td>利息和</td>
  <td><input type="text" id="sum2"  disabled="disabled" value='0'> ￥</td>
</tr>
<tr>
  <td>本息和</td>
  <td><input type="text" id="sum3"  disabled="disabled" value='0'> ￥</td>
</tr>
</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

/*取复利*/
function fuli(rate, year){
	var result = 0;
	for(var i=year;i>0;i--){
	  result+=p(rate,i);
	}
	return result;
}

function calc(){
	var initMoney= getNumberValue("initMoney");
	var rate= getNumberValue("rate") +0.0;
	var year= getNumberValue("year");
	var each= getNumberValue("each");
	var sum1 = (year-1)*each+initMoney;
	var sum3=each* fuli(  (1+rate/100),(year-1)) + initMoney*p( (1+rate/100) ,year);
	
	var sum2 = sum3-sum1;
	setValue("sum1",sum1);
	setValue("sum2",sum2);
	setValue("sum3",sum3);
}

function setValue(id,value){
	document.getElementById(id).value=value;
}

function getNumberValue(id){
	return parseFloat(document.getElementById(id).value);
}
</script>
<table>
<tr>
  <td>起始资金</td>
  <td><input type="text" id="initMoney" value='10000'> ￥</td>
<tr>
  <td>每年收益</td>
  <td><input type="text" id="rate" value='5'> %</td>
</tr>
<tr>
  <td>复利年数</td>
  <td><input type="text" id="year" value='10'> 年</td>
</tr>
<tr>
  <td>每年追加资金</td>
  <td><input type="text" id="each" value='10000'> ￥</td>
</tr>
<tr>
   <td colspan="2" align="center"><input type="button" value="计算" onclick="calc()"></td>
</tr>
<tr>
  <td>本金和</td>
  <td><input type="text" id="sum1" disabled="disabled"  value='0'> ￥</td>
</tr>
<tr>
  <td>利息和</td>
  <td><input type="text" id="sum2"  disabled="disabled" value='0'> ￥</td>
</tr>
<tr>
  <td>本息和</td>
  <td><input type="text" id="sum3"  disabled="disabled" value='0'> ￥</td>
</tr>
</table>

渲染中渲染完成

效果

复利公式：
F = p* ( (1+r)^n );
F 最终收入
p 本金
r 年利率
n 存了多少年

假设情景一：
p = 10000
r = 0.05
n = 1

解读：
本金是10000
年利率是5%
存了一年 1次
复利收入 10000*( (1+0.05)^1 ) = 10500

假设情景二：
p = 10000
r = 0.05
n = 2

解读：
本金是10000
年利率是5%
存了两年
复利收入 10000*( (1+0.05)^2 ) = 11025

运行效果

代码行数较多，请点击查看

<style>
table{
 border-collapse:collapse;
}
td{
  border:1px silver solid;
  padding: 5px;
  font-size:12px;
}
input{
  width:80px;
}
</style>
<table>
<tr>
  <td>起始资金</td>
  <td><input type="text" id="initMoney" value='0'> ￥</td>
</tr>
<tr>
  <td>每年收益</td>
  <td><input type="text" id="rate" value='0'> %</td>
</tr>
<tr>
  <td>复利年数</td>
  <td><input type="text" id="year" value='1'> 年</td>
</tr>
<tr>
  <td>每年追加资金</td>
  <td><input type="text" id="each" value='0'> ￥</td>
</tr>
<tr>
   <td colspan="2" align="center"><input type="button" value="计算" ></td>
</tr>
<tr>
  <td>本金和</td>
  <td><input type="text" id="sum1" disabled="disabled"  value='0'> ￥</td>
</tr>
<tr>
  <td>利息和</td>
  <td><input type="text" id="sum2"  disabled="disabled" value='0'> ￥</td>
</tr>
<tr>
  <td>本息和</td>
  <td><input type="text" id="sum3"  disabled="disabled" value='0'> ￥</td>
</tr>

</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

运行效果

代码行数较多，请点击查看

<style>
table{
 border-collapse:collapse;
}
td{
  border:1px silver solid;
  padding: 5px;
  font-size:12px;
}
input{
  width:180px;
}
</style>
<script>
/*取幂函数*/
function p(base, power){
	if(1==power)
	   return base
	if(0==power)
	   return 1;
	var result = base;
	for(var i = 0; i<power-1; i++){
		result = result*base;
	}
	return result;
}

/*取复利*/
function fuli(rate, year){
	var result = 0;
	for(var i=year;i>0;i--){
	  result+=p(rate,i);
	}
	return result;
}

function calc(){
	var initMoney= getNumberValue("initMoney");
	var rate= getNumberValue("rate") +0.0;
	var year= getNumberValue("year");
	var each= getNumberValue("each");
	var sum1 = (year-1)*each+initMoney;
	var sum3=each* fuli(  (1+rate/100),(year-1)) + initMoney*p( (1+rate/100) ,year);
	
	var sum2 = sum3-sum1;
	setValue("sum1",sum1);
	setValue("sum2",sum2);
	setValue("sum3",sum3);
}

function setValue(id,value){
	document.getElementById(id).value=value;
}

function getNumberValue(id){
	return parseFloat(document.getElementById(id).value);
}
</script>
<table>
<tr>
  <td>起始资金</td>
  <td><input type="text" id="initMoney" value='10000'> ￥</td>
<tr>
  <td>每年收益</td>
  <td><input type="text" id="rate" value='5'> %</td>
</tr>
<tr>
  <td>复利年数</td>
  <td><input type="text" id="year" value='10'> 年</td>
</tr>
<tr>
  <td>每年追加资金</td>
  <td><input type="text" id="each" value='10000'> ￥</td>
</tr>
<tr>
   <td colspan="2" align="center"><input type="button" value="计算" onclick="calc()"></td>
</tr>
<tr>
  <td>本金和</td>
  <td><input type="text" id="sum1" disabled="disabled"  value='0'> ￥</td>
</tr>
<tr>
  <td>利息和</td>
  <td><input type="text" id="sum2"  disabled="disabled" value='0'> ￥</td>
</tr>
<tr>
  <td>本息和</td>
  <td><input type="text" id="sum3"  disabled="disabled" value='0'> ￥</td>
</tr>
</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

/*取复利*/
function fuli(rate, year){
	var result = 0;
	for(var i=year;i>0;i--){
	  result+=p(rate,i);
	}
	return result;
}

function calc(){
	var initMoney= getNumberValue("initMoney");
	var rate= getNumberValue("rate") +0.0;
	var year= getNumberValue("year");
	var each= getNumberValue("each");
	var sum1 = (year-1)*each+initMoney;
	var sum3=each* fuli(  (1+rate/100),(year-1)) + initMoney*p( (1+rate/100) ,year);
	
	var sum2 = sum3-sum1;
	setValue("sum1",sum1);
	setValue("sum2",sum2);
	setValue("sum3",sum3);
}

function setValue(id,value){
	document.getElementById(id).value=value;
}

function getNumberValue(id){
	return parseFloat(document.getElementById(id).value);
}
</script>
<table>
<tr>
  <td>起始资金</td>
  <td><input type="text" id="initMoney" value='10000'> ￥</td>
<tr>
  <td>每年收益</td>
  <td><input type="text" id="rate" value='5'> %</td>
</tr>
<tr>
  <td>复利年数</td>
  <td><input type="text" id="year" value='10'> 年</td>
</tr>
<tr>
  <td>每年追加资金</td>
  <td><input type="text" id="each" value='10000'> ￥</td>
</tr>
<tr>
   <td colspan="2" align="center"><input type="button" value="计算" onclick="calc()"></td>
</tr>
<tr>
  <td>本金和</td>
  <td><input type="text" id="sum1" disabled="disabled"  value='0'> ￥</td>
</tr>
<tr>
  <td>利息和</td>
  <td><input type="text" id="sum2"  disabled="disabled" value='0'> ￥</td>
</tr>
<tr>
  <td>本息和</td>
  <td><input type="text" id="sum3"  disabled="disabled" value='0'> ￥</td>
</tr>
</table>

渲染中渲染完成

效果

本练习的效果

复利公式

html部分

答案