zoukankan html css js c++ java

理财小工具（二）贷款计算器

最近有个需求，需要制作一个web端的小工具-----贷款计算器

先说下我的环境：

Hbuilder 简直是神器，非常好用

mui Hbuilder自带，同为Dcloud公司产品

搭页面：

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="css/app.css" />
        <link href="css/mui.picker.min.css" rel="stylesheet" />
        <link href="css/mui.poppicker.css" rel="stylesheet" />
    </head>

    <body>

        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">存款计算</h1>
        </header>

        <div class="mui-content">
            <!--
                作者：1546149135@qq.com
                时间：2016-08-04
                描述：头部选择存款方式
            -->
            <div class="mui-content">
                <div style="margin-left: 140px; margin-right: 140px;margin-top: 10px; margin-bottom: 10px;">
                    <div id="segmentedControl" class="mui-segmented-control">
                        <a class="mui-control-item mui-active" href="#item2">
                            活期
                        </a>
                        <a class="mui-control-item" href="#item3">
                            定期
                        </a>
                    </div>
                </div>
                <div>
                    <!--
                        作者：1546149135@qq.com
                        时间：2016-08-05
                        描述：活期存款
                    -->
                    <div id="item2" class="mui-control-content mui-active">
                        <!--
                            作者：1546149135@qq.com
                            时间：2016-08-04
                            描述：顶部展示利息和本息合计
                        -->
                        <div style="height: 150px; background: #ffffff;">
                            <div class="mui-pull-left" style="background: #5BC0DE;  49.8%; height: 150px;">
                                <h3 style="color: #ffffff; margin-top: 10px; text-align: left; margin-left: 20px;">利息：</h3>
                                <h2 id="lixi" style="color: #ffffff; margin-top: 30px; text-align: center; font-size: 35px;" id="lixi">0.00</h2>
                            </div>
                            <div class="mui-pull-right" style="background: #5BC0DE;  49.8%; height: 150px;">
                                <h3 style="color: #ffffff; margin-top: 10px; text-align: left; margin-left: 20px;">本息合计：</h3>
                                <h2 id="benxi" style="color: #ffffff; margin-top: 30px; text-align: center; font-size: 35px;" id="lixi">0.00</h2>
                            </div>
                        </div>
                        <!--
                            作者：1546149135@qq.com
                            时间：2016-08-04
                            描述：展示计算相关参数
                        -->
                        <p></p>
                        <ul class="mui-table-view">

                            <li class="mui-table-view-cell">
                                <div class="mui-input-row">
                                    <label>存款总金额 (元)</label>
                                    <input id="sunnumber" type="text" style=" 30%;" class="mui-input-clear" placeholder="请输入天数"><span class="mui-icon mui-icon-clear mui-hidden"></span>
                                </div>

                            </li>
                            <li class="mui-table-view-cell">
                                <div class="mui-input-row">
                                    <label>存款期限(天)</label>
                                    <input id="sumdate" type="text" style=" 30%;" class="mui-input-clear" placeholder="请输入天数"><span class="mui-icon mui-icon-clear mui-hidden"></span>
                                </div>
                            </li>
                            <li class="mui-table-view-cell mui-icon-right-nav">
                                <div class="mui-input-row">
                                    <label>年利率(%)</label>
                                    <input type="text" style=" 30%;" class="mui-input-clear" placeholder="0.35" />
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!--
                        作者：1546149135@qq.com
                        时间：2016-08-05
                        描述：定期存款
                    -->
                    <div id="item3" class="mui-control-content">
                        <!--
                            作者：1546149135@qq.com
                            时间：2016-08-04
                            描述：顶部展示利息和本息合计
                        -->
                        <div style="height: 150px; background: #ffffff;">
                            <div class="mui-pull-left" style="background: #5BC0DE;  49.8%; height: 150px;">
                                <h3 style="color: #ffffff; margin-top: 10px; text-align: left; margin-left: 20px;">利息：</h3>
                                <h2 id="dingqilixi" style="color: #ffffff; margin-top: 30px; text-align: center; font-size: 35px;" id="lixi">0.00</h2>
                            </div>
                            <div class="mui-pull-right" style="background: #5BC0DE;  49.8%; height: 150px;">
                                <h3 style="color: #ffffff; margin-top: 10px; text-align: left; margin-left: 20px;">本息合计：</h3>
                                <h2 id="dingqibenxi" style="color: #ffffff; margin-top: 30px; text-align: center; font-size: 35px;" id="lixi">0.00</h2>
                            </div>
                        </div>
                        <!--
                            作者：1546149135@qq.com
                            时间：2016-08-04
                            描述：展示计算相关参数
                        -->
                        <p></p>
                        <ul class="mui-table-view">

                            <li class="mui-table-view-cell">
                                <div class="mui-input-row">
                                    <label>存款总金额 (元)</label>
                                    <input id="sumnumber2" type="text" style=" 30%;" class="mui-input-clear" placeholder="请输入天数"><span class="mui-icon mui-icon-clear mui-hidden"></span>
                                </div>

                            </li>
                            <li class="mui-table-view-cell">
                                <div class="mui-input-row">
                                    <label id="picdate" style=" 70%;">存款期限</label>
                                    <label id="datatype" style="  20%; margin-top: 2px; font-size: 15px; color:#BBBBBB;">3个月</label>
                                </div>
                            </li>
                            <li class="mui-table-view-cell mui-icon-right-nav">
                                <div class="mui-input-row">
                                    <label  style=" 70%;">年利率(%)</label>
                                    <label id="dingqililv" style="  20%; margin-top: 2px; font-size: 15px; color:#BBBBBB;">1.10</label>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <h5 style="font-size: 14px; text-align: center;">以上为央行2015年最新公布的存款基准利率</h5>
            </div>
    </body>

    <script src="js/mui.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/mui.picker.js"></script>
    <script src="js/mui.poppicker.js"></script>

    <script type="text/javascript">
        (function($, doc) {

            $.ready(function() {
                //普通示例
                var userPicker = new $.PopPicker();
                userPicker.setData([{
                    value: '3M',
                    text: '3个月'
                }, {
                    value: '6M',
                    text: '6个月'
                }, {
                    value: '1N',
                    text: '1年'
                }, {
                    value: '2N',
                    text: '2年'
                }, {
                    value: '3N',
                    text: '3年'
                }, {
                    value: '5N',
                    text: '5年'
                }]);
                var showUserPickerButton = doc.getElementById('picdate');
                var userResult = doc.getElementById('datatype');

                var dingqililv;

                showUserPickerButton.addEventListener('tap', function(event) {
                    userPicker.show(function(items) {
                        userResult.innerText = JSON.stringify(items[0].text).replace(""", "").replace(""", "");
                        dingqibenjin = doc.getElementById('sumnumber2');

                        dingqilixi = doc.getElementById('dingqilixi');
                        dingqibenxi = doc.getElementById('dingqibenxi');

                        value = JSON.stringify(items[0].value).replace(""", "").replace(""", "");
                        if(value == "3M") {
                            dingqililv = 0.011;
                            dingqilixi = lilvjisuan(dingqibenjin.value, dingqililv, 90);

                            doc.getElementById('dingqililv').innerHTML = "1.1";
                        } else if(value == "6M") {
                            dingqililv = 0.013;
                            dingqilixi = lilvjisuan(dingqibenjin.value, dingqililv, 180);
                            doc.getElementById('dingqililv').innerHTML = "1.3";
                        } else if(value == "1N") {
                            dingqililv = 0.015;
                            dingqilixi = lilvjisuan(dingqibenjin.value, dingqililv, 365);
                            doc.getElementById('dingqililv').innerHTML = "1.5";
                        } else if(value == "2N") {
                            dingqililv = 0.021;
                            dingqilixi = lilvjisuan(dingqibenjin.value, dingqililv, 730);
                            doc.getElementById('dingqililv').innerHTML = "2.1";
                        } else if(value == "3N") {
                            dingqililv = 0.0275;
                            dingqilixi = lilvjisuan(dingqibenjin.value, dingqililv, 1095);
                            doc.getElementById('dingqililv').innerHTML = "2.75";
                        } else if(value == "5N") {
                            dingqililv = 0.0275;
                            dingqilixi = lilvjisuan(dingqibenjin.value, dingqililv, 1825);
                            doc.getElementById('dingqililv').innerHTML = "2.75";
                        }

                        dingqilixi = changeTwoDecimal(dingqilixi);
                        dingqibenxi = dingqibenjin.value + dingqilixi;
                        dingqibenxi = changeTwoDecimal(dingqibenxi);
                        doc.getElementById('dingqilixi').innerHTML = dingqilixi;
                        doc.getElementById('dingqibenxi').innerHTML = dingqibenxi;

                    });
                }, false);

            });

            /**
             * 活期
             */
            var benjin = doc.getElementById('sunnumber');
            var qixian = doc.getElementById('sumdate');
            qixian.addEventListener('input', function(event) {

                //                lixi = ((benjin.value) * 0.0035) / 365 * ((qixian.value>999)?999:qixian.value);
                lixi = lilvjisuan(benjin.value, 0.0035, qixian.value);
                lixi = changeTwoDecimal(lixi);

                benxi = benjin.value + lixi;
                benxi = changeTwoDecimal(benxi);

                doc.getElementById('lixi').innerHTML = lixi;
                doc.getElementById('benxi').innerHTML = benxi;

            })

        })(mui, document);

        function lilvjisuan(benjin, lilv, tianshu) {
            var lixi;
            lixi = (benjin * lilv) / 365 * ((tianshu > 999) ? 999 : tianshu);
            return lixi;
        }

        function changeTwoDecimal(x) {
            var f_x = parseFloat(x);
            if(isNaN(f_x)) {
                alert('function:changeTwoDecimal->parameter error');
                return false;
            }
            var f_x = Math.round(x * 100) / 100;
            return f_x;
        }
    </script>

</html>

效果如下：

逻辑部分：

<script type="text/javascript">
        (function($, doc) {

            $.ready(function() {
                //普通示例
                var userPicker = new $.PopPicker();
                userPicker.setData([{
                    value: '3M',
                    text: '3个月'
                }, {
                    value: '6M',
                    text: '6个月'
                }, {
                    value: '1N',
                    text: '1年'
                }, {
                    value: '2N',
                    text: '2年'
                }, {
                    value: '3N',
                    text: '3年'
                }, {
                    value: '5N',
                    text: '5年'
                }]);
                var showUserPickerButton = doc.getElementById('picdate');
                var userResult = doc.getElementById('datatype');

                var dingqililv;

                showUserPickerButton.addEventListener('tap', function(event) {
                    userPicker.show(function(items) {
                        userResult.innerText = JSON.stringify(items[0].text).replace(""", "").replace(""", "");
                        dingqibenjin = doc.getElementById('sumnumber2');

                        dingqilixi = doc.getElementById('dingqilixi');
                        dingqibenxi = doc.getElementById('dingqibenxi');

                        value = JSON.stringify(items[0].value).replace(""", "").replace(""", "");
                        if(value == "3M") {
                            dingqililv = 0.011;
                            dingqilixi = lilvjisuan(dingqibenjin.value, dingqililv, 90);

                            doc.getElementById('dingqililv').innerHTML = "1.1";
                        } else if(value == "6M") {
                            dingqililv = 0.013;
                            dingqilixi = lilvjisuan(dingqibenjin.value, dingqililv, 180);
                            doc.getElementById('dingqililv').innerHTML = "1.3";
                        } else if(value == "1N") {
                            dingqililv = 0.015;
                            dingqilixi = lilvjisuan(dingqibenjin.value, dingqililv, 365);
                            doc.getElementById('dingqililv').innerHTML = "1.5";
                        } else if(value == "2N") {
                            dingqililv = 0.021;
                            dingqilixi = lilvjisuan(dingqibenjin.value, dingqililv, 730);
                            doc.getElementById('dingqililv').innerHTML = "2.1";
                        } else if(value == "3N") {
                            dingqililv = 0.0275;
                            dingqilixi = lilvjisuan(dingqibenjin.value, dingqililv, 1095);
                            doc.getElementById('dingqililv').innerHTML = "2.75";
                        } else if(value == "5N") {
                            dingqililv = 0.0275;
                            dingqilixi = lilvjisuan(dingqibenjin.value, dingqililv, 1825);
                            doc.getElementById('dingqililv').innerHTML = "2.75";
                        }

                        dingqilixi = changeTwoDecimal(dingqilixi);
                        dingqibenxi = dingqibenjin.value + dingqilixi;
                        dingqibenxi = changeTwoDecimal(dingqibenxi);
                        doc.getElementById('dingqilixi').innerHTML = dingqilixi;
                        doc.getElementById('dingqibenxi').innerHTML = dingqibenxi;

                    });
                }, false);

            });

            /**
             * 活期
             */
            var benjin = doc.getElementById('sunnumber');
            var qixian = doc.getElementById('sumdate');
            qixian.addEventListener('input', function(event) {

                //                lixi = ((benjin.value) * 0.0035) / 365 * ((qixian.value>999)?999:qixian.value);
                lixi = lilvjisuan(benjin.value, 0.0035, qixian.value);
                lixi = changeTwoDecimal(lixi);

                benxi = benjin.value + lixi;
                benxi = changeTwoDecimal(benxi);

                doc.getElementById('lixi').innerHTML = lixi;
                doc.getElementById('benxi').innerHTML = benxi;

            })

        })(mui, document);

        function lilvjisuan(benjin, lilv, tianshu) {
            var lixi;
            lixi = (benjin * lilv) / 365 * ((tianshu > 999) ? 999 : tianshu);
            return lixi;
        }

        function changeTwoDecimal(x) {
            var f_x = parseFloat(x);
            if(isNaN(f_x)) {
                alert('function:changeTwoDecimal->parameter error');
                return false;
            }
            var f_x = Math.round(x * 100) / 100;
            return f_x;
        }
    </script>

主要算法就是：

（本金*利率）/365 * 天数

也没啥好说的，直接复制过去的同学需要注意要导入正确的css包和js包

源码地址：链接：百度网盘密码：gg3b

查看全文

相关阅读:
推荐6款极具个性化的在线生成logo的网站
 网站图标制作
 关于域名如何指向WordPress homepage问题的解决
 WordPress 博客文章中google adsense广告展示方法之一
 WordPress网站搬家经验总结
 WordPress网站搬家的问题
 Linux RAID卡优化
 说说JSON和JSONP，也许你会豁然开朗
 可以嵌入程序的chrome
maven jetty指定端口启动

原文地址：https://www.cnblogs.com/wobeinianqing/p/5742583.html