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; } </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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2021-05-18 不说了,站长代码都没我快
a740998949




花了一下午,数据为空转换为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




用递归求结果,加了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>

							





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





2021-03-26 做完了
2020-10-30 自己搞的BMI测试身体健康情况
2020-08-19 花了一天才搞懂这代码的数学,站长你个der,之前都没教现在突然这么猛的来这两个函数...


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

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

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

上传截图