how2j.cn

下载区
文件名 文件大小
UI.html 947b
步骤 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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
复利公式:
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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


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


问答区域    
2022-04-04 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
代码实现了复利计算和输入内容校验功能

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



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2022-01-21 完成
逻辑大大




完成
<!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 不说了,站长代码都没我快
2021-04-01 答案
2021-03-26 做完了


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

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-JavaScript-阶段性练习3 的提问

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

上传截图