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

JavaScript系列教材（十九）- 对象 - javascript 数字对象详解

下载区
文件名	文件大小
UI.html	947b
解压rar如果失败，请用5.21版本或者更高版本的winrar 点击下载 winrar5.21

工具版本兼容问题

步骤 1 : 本练习的效果
步骤 2 : 复利公式
步骤 3 : html部分
步骤 4 : 答案

步骤 1 :

本练习的效果

edit 顶折

纠问

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

<style>
table{
 border-collapse:collapse;
}
td{
  border:1px silver solid;
  padding: 5px;
  font-size:12px;
}
input{
  width:180px;
}
</style>
<script>
    function getUrlParms(name){
           var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
           var r = window.location.search.substr(1).match(reg);
           if(r!=null){
               var result = unescape(r[2]);
	       var reg = new RegExp('%',"g");//g,表示全部替换。
	       result= result .replace(reg,"");
               return result;
           }
           return null;
    }

/*取幂函数*/
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>

<script>
var rate = getUrlParms("rate");
if(null!=rate){
    rate = new Number(rate);
    rate = rate.toFixed(2);
    document.getElementById("rate").value=rate;
    document.getElementById("each").value=0;
    calc();
}
</script>

源代码

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

/*取幂函数*/
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>

渲染中渲染完成

效果

步骤 2 :

复利公式

edit 顶折

纠问

复利公式：
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

步骤 3 :

html部分

edit 顶折

纠问

运行效果

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

<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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 4 :

答案

edit 顶折

纠问

运行效果

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

<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 setValue(id,value){
	document.getElementById(id).value=value;
}

渲染中渲染完成

效果

JavaScript系列教材（十七）- 语言基础 - 错误处理

JavaScript系列教材（十九）- 对象 - javascript 数字对象详解

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2024-07-26 JS 实现复利计算功能

虚心求学

关于前端部分-JavaScript-阶段性练习3 的提问

主要使用了 Math.pow(a,b) 函数和 document.getElementById() 的获取元素方法。需要注意的细节： 1. 第一年不追加投资; 2.输入的利率，结果要除以100，换为百分比； 3.输入的数据需要转换为 Float 类型，否则计算会出错; 4. js 无Double，转换时需要取浮点数。 5.当年的利息需要累计到下一年，利滚利

/*--------------------- style.css 文件---------------------*/

tr{
	text-align:right;
	border:1px solid  black;
}

//--------------------- srcipt.js 文件-----------------------

//打印结果
function log(info){
	get('res').value += info+"\r\n";
}
function get(id){
	var element = document.getElementById(id);
	return element ;
}

function set(id,value){
	get(id).value=value;
}

function getFloatById(id){
	return parseFloat(get(id).value);
}
//获取总利息收入
function getTotalInterest(init,rate,year,append){
	//每年总投资金额，第一年仅投本金，无追加
	let invest = init+0*append;
	//总利息收入
	let total = 0;
	for(let d = 0; d<year ; d++)
	{
		//本年的利息收入 = 投的钱*收益率
		currentYearIncome = invest * rate;
		total +=currentYearIncome;

		//每年追投一些金额；
		//同时，今年的利息收入继续投资，明年利滚利
		invest += append + currentYearIncome ;

		//记录
		log("第"+(d+1)+"年 利息为："+currentYearIncome);
		
		
	}
	log("总收入为："+total);
	return total ;
}

function count( ){
	//拿到数据
	const init = getFloatById('init');
	const rate = getFloatById('rate')/100.0;
	const year = getFloatById('year');
	const append = getFloatById('append');
	
	//本金和为：起始资金 + 每年追投的金额（第一年没追加）
	const sum1 = init+append*(year-1);
	//利息和为：
	const sum2 = getTotalInterest(init,rate,year,append);
	//本息和为：
	const sum3 = sum1 + sum2;
	
	//写出数据
	set('sum1',sum1);
	set('sum2',sum2);
	set('sum3',sum3);
}

<!------------------- html 文件 -------------------->

<html>
<head>
        <meta http-equiv="Content-Type" connect="text/html;charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="script.js"></script>
</head>

<body  style="width:60%">
	<table>
		<tr>
			<td style="width:130px">起始资金：</td>
			<td style="width:200px"><input id="init" type="text">￥</td>
		</tr>
		<tr>
			<td>年收益率：</td>
			<td><input id="rate" type="text">%</td>
		</tr>
		<tr>
			<td>复利年数：</td>
			<td><input id="year" type="text">年</td>
		</tr>
		<tr>
			<td>年追加额：</td>
			<td><input id="append" type="text">￥</td>
		</tr>
		<tr><td colspan="2" ><center><button onclick="count();"  style="padding:5 20;margin:15px;letter-spacing:3">计算</button></center><td></tr>
<tr>
			<td style="width:120px">本金和：</td>
			<td style="width:180px"><input id="sum1" type="text">￥</td>
		</tr>
		<tr>
			<td>利息和：</td>
			<td><input id="sum2" type="text">￥</td>
		</tr>
		<tr>
			<td>本息和：</td>
			<td><input id="sum3" type="text">￥</td>
		</tr>
	</table>

	<div>
	<textarea style="margin-top:30px; height:300px; width:50%;font-size:16px;letter-spacing:1;line-height:135%"  id="res"></textarea>
	</div>
</body>
</html>

1 个答案

星辰220
答案时间：2025-04-06

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <table> <tr> <td class="normal">起始资金</td> <td class="normal"><input type="text" id="p">￥</td> </tr> <tr> <td class="normal">每年收益</td> <td class="normal"><input type="text" id="r">%</td> </tr> <tr> <td class="normal">复利年数</td> <td class="normal"><input type="text" id="nian">年</td> </tr> <tr> <td class="normal">每年追加资金</td> <td class="normal"><input type="text" id="pn">￥</td> </tr> <tr> <td colspan="2"> <button>计算</button> </td> </tr> <tr> <td class="normal">本金和</td> <td class="normal"><input type="text" id="sumP">￥</td> </tr> <tr> <td class="normal" class="normal">利息和</td> <td class="normal"><input type="text" id="sumR">￥</td> </tr> <tr> <td class="normal">本息和</td> <td class="normal"><input type="text" id="sumPR">￥</td> </tr> </table> <script src="script.js"> </script> </body> </html> td { border: 1px solid black; width: 250px; height: 50px; } table { border-collapse: collapse; } button { width: 250px; height: 35px; display: block; margin: 0 auto; } .normal { padding: 8px; } var p; //起始本金 var F; //最终收入 var r; //年利率 var n; //存了多少年 var pn; //每年追加本金 var sumP; //本金和 var sumR; //利息和 var sumPR; //本息和+ function Fjisuan(p, r, n, pn) { let nianzhongshouru; let diyinian; let lixihe; let benjinhe; diyinian = p * Math.pow((1 + r), n); nianzhongshouru = diyinian; for (let i = 1; i < n; i++) { nianzhongshouru += pn * Math.pow((1 + r), (n - i)); } benjinhe = p + pn * (n-1); lixihe = nianzhongshouru - benjinhe; return [benjinhe, lixihe, nianzhongshouru]; } document.getElementsByTagName('button')[0].addEventListener('click', function () { p = document.getElementById('p').value; r = document.getElementById('r').value; n = document.getElementById('nian').value; pn = document.getElementById('pn').value; p = parseFloat(p); r = parseFloat(r); n = parseInt(n); pn = parseFloat(pn); r = r / 100; let res = Fjisuan(p, r, n, pn); document.getElementById("sumP").value = res[0]; document.getElementById("sumR").value = res[1]; document.getElementById("sumPR").value = res[2]; });

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-04-04 JavaScript 阶段性练习-3

起个名

关于前端部分-JavaScript-阶段性练习3 的提问

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

<style>
	table{
		border-collapse: collapse;
	}
	td{
		border: 1px solid lightgray;
		padding: 5px;
		font-size: 12px;
	}
	input{
		margin: 2px 2px;
		width: 80%;
	}
	button{
		margin: 2px 2px;
		align: center;
		width: 45%;
	}
</style>
<script>
	// 
	function getPrincipalsum(intialfund,compoundinterestyears,yearaddfund){
		var principalsum = intialfund + compoundinterestyears * yearaddfund;
		return principalsum;
	}
	// 
	function getInterestsum(intialfund, yearearnings, compoundinterestyears, yearaddfund){
		var yearper = yearearnings / 100;
		var interestsum = 0;
		for(var i = 0;i < compoundinterestyears;i++){
			interestsum += intialfund * yearper;
			intialfund += yearaddfund;
		}
		return interestsum;
	}
	// 
	function getPrincipalInterestSum(intialfund, yearearnings, compoundinterestyears, yearaddfund){
		var principalinterestsum = getPrincipalsum(intialfund, compoundinterestyears, yearaddfund) + getInterestsum(intialfund, yearearnings, compoundinterestyears, yearaddfund);
		return principalinterestsum;
	}
	function setValue(id, value){
		document.getElementById(id).value = value;
	}
	function calc(){
		var intialfund = *;
		var yearearnings = *;
		var compoundinterestyears = *;
		var yearaddfund = *;
		
		setValue("principalsum", getPrincipalsum(intialfund, compoundinterestyears, yearaddfund));
		setValue("interestsum", getInterestsum(intialfund, yearearnings, compoundinterestyears, yearaddfund));
		setValue("principalinterestsum", getPrincipalInterestSum(intialfund, yearearnings, compoundinterestyears, yearaddfund));
	}
	function getNumber(id){
		return parseFloat(document.*.value);
	}
</script>
<table border="1">
	<tr>
		<td width="40%">起始资金</td>
		<td><input type="text" id="intialfund" value="10000"></input> ¥ </td>
	</tr>
	<tr>
		<td>每年收益</td>
		<td><input type="text" id="yearearnings" value="5"></input> % </td>
	</tr>
	<tr>
		<td>复利年数</td>
		<td><input type="text" id="compoundinterestyears" value="10"></input> 年 </td>
	</tr>
	<tr>
		<td>每年追加资金</td>
		<td><input type="text" id="yearaddfund" value="10000"></input> ¥ </td>
	</tr>
	<tr>
		<td colspan="2" align="center"><input type="button" value="计算" onclick="calc()"></td>
	</tr>
	<tr>
		<td>本金和</td>
		<td><input type="text" id="principalsum" value="0"></input> ¥ </td>
	</tr>
	<tr>
		<td>利息和</td>
		<td><input type="text" id="interestsum" value="0"></input> ¥ </td>
	</tr>
	<tr>
		<td>本息和</td>
		<td><input type="text" id="principalinterestsum" value="0"></input> ¥ </td>
	</tr>
<table>

2 个答案

CharlieLong
答案时间：2023-10-31

代码实现了复利计算和输入内容校验功能

代码超过 5行，点击查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复利计算器</title>
    <script>
        // 复利计算
        function cal(){
            let initFund=Number(document.getElementById("initFund").value);
            let iAnnualEarn=Number(document.getElementById("iAnnualEarn").value);
            let iComYears=Number(document.getElementById("iComYears").value);
            let iSuppleFund=Number(document.getElementById("iSuppleFund").value);
            let iTotalCapital=0;
            let iTotalInterest=0;
            let iTotalCapAndInt=0;

            iTotalCapital=initFund+iSuppleFund*(iComYears-1);
            iTotalCapAndInt=initFund*(1+iAnnualEarn/100);
            for(let i=0;i<iComYears-1;i++){
                iTotalCapAndInt=(iTotalCapAndInt+iSuppleFund)*(1+iAnnualEarn/100);
            }
            iTotalInterest=iTotalCapAndInt-iTotalCapital;

            document.getElementById("iTotalCapital").value=iTotalCapital;
            document.getElementById("iTotalInterest").value=iTotalInterest;
            document.getElementById("iTotalCapAndInt").value=iTotalCapAndInt;
        }
        function check(inputElement,outputElement){
            if(inputElement.value==""){
                inputElement.style.border= "1px solid red";
                document.getElementById(outputElement).textContent="不能为空！";
                doDisabled();
            }else if(!isNumeric(inputElement.value)){
                inputElement.style.border= "1px solid red";
                document.getElementById(outputElement).textContent="请输入数字！";
                doDisabled();
            }else{
                inputElement.style.border= "1px solid silver";
                document.getElementById(outputElement).textContent="";
                doDisabled();
            }

        }
        function isNumeric(input) {
            return !isNaN(input) && !isNaN(parseFloat(input));
        }
        function doDisabled(){
            let initFundOutput=document.getElementById("initFundOutput").textContent;
            let iAnnualEarnOutput=document.getElementById("iAnnualEarnOutput").textContent;
            let iComYearsOutput=document.getElementById("iComYearsOutput").textContent;
            let iSuppleFundOutput=document.getElementById("iSuppleFundOutput").textContent;
            if(initFundOutput==""&&iAnnualEarnOutput==""&&iComYearsOutput==""&&iSuppleFundOutput==""){
                document.getElementById("cal").disabled=false;
            }else{
                document.getElementById("cal").disabled=true;
            }
        }
    </script>
</head>
<style>
    table{
        border-collapse:collapse;
    }
    td{
        border:1px silver solid;
        padding: 5px;
        font-size:12px;
    }
    button{
        width: 100px;
    }
    input{
        width:100px;
        border:1px silver solid;
        border-radius: 3px;
    }
</style>
<table>
    <tr>
        <td>起始资金</td>
        <td><input type="text" id="initFund" value='0' onchange="check(this,'initFundOutput')" > ￥<div id="initFundOutput"></div></td>
    </tr>
    <tr>
        <td>每年收益</td>
        <td><input type="text" id="iAnnualEarn" value='0' onchange="check(this,'iAnnualEarnOutput')" > %<div id="iAnnualEarnOutput"></div></td>
    </tr>
    <tr>
        <td>复利年数</td>
        <td><input type="text" id="iComYears" value='1' onchange="check(this,'iComYearsOutput')" > 年<div id="iComYearsOutput"></div></td>
    </tr>
    <tr>
        <td>每年追加资金</td>
        <td><input type="text" id="iSuppleFund" value='0' onchange="check(this,'iSuppleFundOutput')" > ￥<div id="iSuppleFundOutput"></div></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><button id="cal" onclick="cal()" >计算</button><div id="workout"></div></td>
    </tr>
    <tr>
        <td>本金和</td>
        <td><input type="text" id="iTotalCapital" disabled="disabled"  value='0'> ￥</td>
    </tr>
    <tr>
        <td>利息和</td>
        <td><input type="text" id="iTotalInterest"  disabled="disabled" value='0'> ￥</td>
    </tr>
    <tr>
        <td>本息和</td>
        <td><input type="text" id="iTotalCapAndInt"  disabled="disabled" value='0'> ￥</td>
    </tr>

</table>
</html>

54Mozu
答案时间：2022-12-08

代码超过 5行，点击查看

<style>
            table{
                border-collapse:collapse;
            }
            td{
                border:1px silver solid;
                padding: 5px;
                font-size:12px;
                }
            input{
                width:80px;
            }
        </style>
        <script>
            function get11(){
              var e1 = parseInt(document.getElementById("initMoney").value);
              var e2 = parseInt(document.getElementById("rate").value);
              var e3 = parseInt(document.getElementById("year").value);
              var e4 = parseInt(document.getElementById("each").value);
              var FF1 = 0; //每年的资金,年后的本金加利息和
              var FF2 = 0; //n年后的本金加利息和
              var pp = e4; //每年追加本金
              var rr = e2/100; //利息
              for(var i=1;i<e3+1;i++){
                FF1 = pp*Math.pow((1+rr),i);
                FF2 = FF2 + FF1
              }
              FF2 = FF2 - pp*(1+rr) + e1*(1+rr);
              document.getElementById("sum1").value=+Math.round(e1+e4*e3-e4);
              document.getElementById("num2").value=+Math.round(FF2-e1-e4*e3+e4);
              document.getElementById("num3").value=+Math.round(FF2);
              //document.getElementById("num3").value=+value3;
            }

        </script>    
        <table>
            <tr>
              <td>起始资金</td>
              <td><input type="text" id="initMoney" value='10000'> ￥</td>
            </tr>
            <tr>
              <td>每年收益</td>
              <td><input type="text" id="rate" value='20'> %</td>
            </tr>
            <tr>
              <td>复利年数</td>
              <td><input type="text" id="year" value='15'> 年</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="get11()"></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="num2" value="0" disabled="disabled" > ￥</td>
            </tr>
            <tr>
              <td>本息和</td>
              <td><input type="text" id="num3" value="0" disabled="disabled"> ￥</td>
            </tr>
             
        </table>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-01-21 完成

逻辑大大

关于前端部分-JavaScript-阶段性练习3 的提问

完成

<!DOCTYPE html>
<html>
<style>
    td {
        padding: 5px;
        font-size: 12px;
    }

    input {
        width: 120px;
    }
</style>
<script>
    function getNumberValue(id) {
        return parseFloat(document.getElementById(id).value)
    }
    function setNumberValue(id, value) {
        document.getElementById(id).value = value
    }
    function setbenxihe(zijin, shouyi, nian, zhuijia) {
        sum = 0
        for (i = 0; i < nian; i++) {
            sum = zijin * (1 + shouyi / 100)
            zijin = sum + zhuijia
        }
        return sum
    }
    function _notnan(value) {
        if (value !== value) {
            value = 0
        }
        return value
    }
    function ocik() {
        var zijin = _notnan(parseFloat(getNumberValue("zijin")))
        var shouyi = _notnan(parseFloat(getNumberValue("shouyi")))
        var nian = _notnan(parseFloat(getNumberValue("nian")))
        var zhuijia = _notnan(parseFloat(getNumberValue("zhuijia")))
        var benxihe = setbenxihe(zijin, shouyi, nian, zhuijia)
        var benjinhe = zijin + (nian - 1) * zhuijia
        var lixihe = benxihe - benjinhe
        if (lixihe < 0) {
            lixihe = 0
        }
        // if (benjinhe !== benjinhe) {
        //     benjinhe = 0
        // }
        // if (lixihe !== lixihe) {
        //     lixihe = 0
        // }
        setNumberValue("benxihe", benxihe)
        setNumberValue("benjinhe", benjinhe)
        setNumberValue("lixihe", lixihe)
    }
</script>

<body>
    <table border="1" style="border-collapse: collapse;">
        <tr>
            <td>起始资金</td>
            <td><input type="text" id="zijin">¥</td>
        </tr>
        <tr>
            <td>每年收益</td>
            <td><input type="text" id="shouyi">%</td>
        </tr>
        <tr>
            <td>复利年数</td>
            <td><input type="text" id="nian">年</td>
        </tr>
        <tr>
            <td>每年追加资金</td>
            <td><input type="text" id="zhuijia">¥</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <input type="button" value="计算" onclick="ocik()">
            </td>
        </tr>
        <tr>
            <td>本金和</td>
            <td><input type="text" disabled="disabled" id="benjinhe" value="0">¥</td>
        </tr>
        <tr>
            <td>利息和</td>
            <td><input type="text" disabled="disabled" id="lixihe" value="0">¥</td>
        </tr>
        <tr>
            <td>本息和</td>
            <td><input type="text" disabled="disabled" id="benxihe" value="0">¥</td>
        </tr>
    </table>
</body>

</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-05-18 不说了,站长代码都没我快

a740998949

关于前端部分-JavaScript-阶段性练习3 的提问

花了一下午，数据为空转换为NaN这是个Bug

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function jisuan() {
            var qszj = Number(document.getElementById('qszj').value);
            var mnsy = Number(document.getElementById('mnsy').value);
            var flns = Number(document.getElementById('flns').value);
            var mnzjzj = Number(document.getElementById('mnzjzj').value);
            if (flns == 0){
                alert("请输入复利年数");
                document.getElementById('bjh').value=0;
                document.getElementById('lxh').value=0;
                document.getElementById('bxh').value=0;
            //单年计算
            }else {
                if (flns == 1){
                    he(qszj,mnsy,flns);
                    //多年复利计算
                }else {
                    duohe(qszj,mnsy,flns,mnzjzj);
                }
            }
        }

        //单年计算
        function he(qszj,mnsy,flns) {
            //本金和
            document.getElementById('bjh').value=qszj;
            //利息和
            var lx = qszj * (mnsy/100) * flns;
            document.getElementById('lxh').value=lx;
            //本息和
            document.getElementById('bxh').value=qszj + lx;
        }

        //多年计算
        function duohe(qszj,mnsy,flns,mnzjzj) {
            var zj = qszj;
            //利息和
            var lxzs = 0;
            for (var i = 0; i < flns; i++){
                //单年利息
                var lx = qszj * (mnsy/100);
                console.log("利息" + lx)
                qszj += mnzjzj;
                console.log("起始资金加本金" + qszj)
                qszj += lx;
                console.log("起始资金加本金加复利" + qszj)
                lxzs += lx;
                console.log("本息和" + qszj)
            }
            //本金和
            var bjh = zj + (mnzjzj * (flns - 1));
            document.getElementById('bjh').value=bjh;
            //利息和
            document.getElementById('lxh').value=lxzs;
            //本息和
            document.getElementById('bxh').value=bjh + lx;
        }
    </script>
</head>
<style>
    .t1{
        border-collapse: collapse;
        border-color: rgb(192,192,192);
        font-size: 12px;
    }
    .td1{
        text-align: center;
    }
    .td2{
        text-align: center;
        height: 30px;
    }
    .td2 button{
        width: 70%;
    }
</style>
<body>
    <table class="t1" border="1px" width="18%">
        <tr>
            <td width="29%">起始资金</td>
            <td class="td1"><input type="text" id="qszj">￥</td>
        </tr>

        <tr>
            <td width="29%">每年收益</td>
            <td class="td1"><input type="text" id="mnsy">%</td>
        </tr>

        <tr>
            <td width="29%">复利年数</td>
            <td class="td1"><input type="text" id="flns">年</td>
        </tr>

        <tr>
            <td>每年追加资金</td>
            <td class="td1"><input type="text" id="mnzjzj">￥</td>
        </tr>

        <tr>
            <td class="td2" colspan="2"><button onclick="jisuan()">计算</button></td>
        </tr>

        <tr>
            <td>本金和</td>
            <td class="td1"><input type="text" id="bjh">￥</td>
        </tr>

        <tr>
            <td>利息和</td>
            <td class="td1"><input type="text" id="lxh">￥</td>
        </tr>

        <tr>
            <td>本息和</td>
            <td class="td1"><input type="text" id="bxh">￥</td>
        </tr>
    </table>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-04-01 答案

VOID1

关于前端部分-JavaScript-阶段性练习3 的提问

用递归求结果，加了try-catch

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main{width: 300px;height: 400px;}
        .left{width: 110px;}
        .right{width: 190px;}
        #t1{border-collapse: collapse}
        td{border: black solid 1px;}
    </style>
    <script>
        function excute() {
            var initMoney = document.getElementById('initMoney').value;
            var rate = document.getElementById('rate').value;
            var year = document.getElementById('year').value;
            var add = document.getElementById('add').value;
            try{
                initMoney = Number.parseFloat(initMoney);
                rate = Number.parseFloat(rate);
                year = Number.parseFloat(year);
                add = Number.parseFloat(add);
                var initMoneySum = initMoney+(year-1)*add;
                var result = profitSum(initMoney,add,year,rate);
                var profitsum = result-initMoneySum;
                setValue('initMoneySum',initMoneySum);
                setValue('profitSum',profitsum);
                setValue('sum',result);
            }catch (err){
                document.write(err.message);
            }
        }
        function profitSum(initMoney,add,year,rate){
            initMoney = initMoney*(1+rate);
            year--;
            while(year>=1) {
                initMoney+=add;
                return profitSum(initMoney,add,year,rate);
            }
            return initMoney;
        }
        function setValue(id, value){
            document.getElementById(id).value=value;
        }
    </script>
</head>
<body>

    <div class="main">
        <table id="t1">
            <tr>
                <td class="left">起始资金</td>
                <td class="right"><input id="initMoney" type="text">￥</td>
            </tr>
            <tr>
                <td class="left">每年收益</td>
                <td class="right"><input id="rate" type="text">%</td>
            </tr>
            <tr>
                <td class="left">复利年数</td>
                <td class="right"><input id="year" type="text">年</td>
            </tr>
            <tr>
                <td class="left">每年追加资金</td>
                <td class="right"><input id="add" type="text">￥</td>
            </tr>
            <tr><td align="center" colspan="2"><input type="button" value="计算" onclick="excute()"></td></tr>
            <tr>
                <td class="left">本金和</td>
                <td class="right"><input id="initMoneySum" type="text">￥</td>
            </tr>
            <tr>
                <td class="left">利息和</td>
                <td class="right"><input id="profitSum" type="text">￥</td>
            </tr>
            <tr>
                <td class="left">本息和</td>
                <td class="right"><input id="sum" type="text">￥</td>
            </tr>
        </table>
    </div>

</body>
</html>

1 个答案

dengzengfu5393
答案时间：2022-02-23

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <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="计算" onclick="Count()"></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>  <script> function Count() { var initMoney = parseFloat(document.getElementById("initMoney").value); /* 初始资金 */ var rate = parseFloat(document.getElementById("rate").value); var year = parseInt(document.getElementById("year").value); var each_money = parseFloat(document.getElementById("each").value); var sumMoney = initMoney + (year - 1) * each_money; /* 本金和 */ var interest = 0; for (var i = 1; i <= year; i++) { interest += (initMoney * (Math.pow((1 + rate / 100), i)) - initMoney); /* 利息和 */ // alert(interest); } var sumInterest = sumMoney + interest; /* 本息和 */ document.getElementById("sum1").value = sumMoney; document.getElementById("sum2").value = interest; document.getElementById("sum3").value = sumInterest; } </script> </body> </html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 27 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-JavaScript-阶段性练习3 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图