文档章节

理财小工具(二)贷款计算器

我辈年轻1
 我辈年轻1
发布于 2016/11/03 19:22
字数 1399
阅读 39
收藏 0

最近有个需求,需要制作一个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; width: 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; width: 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="width: 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="width: 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="width: 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; width: 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; width: 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="width: 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="width: 70%;">存款期限</label>
                                    <label id="datatype" style=" width: 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="width: 70%;">年利率(%)</label>
                                    <label id="dingqililv" style=" width: 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

本文转载自:http://www.cnblogs.com/wobeinianqing/p/5742583.html

上一篇: Android 强制竖屏
下一篇: thinkphp
我辈年轻1
粉丝 1
博文 85
码字总数 0
作品 0
南京
程序员
私信 提问
放大招了!今日最全微信小程序清单送给你

微信小程序来的太快就像龙卷风,零点的时候一放出来朋友圈就刷屏了。明美无限也是大半夜不睡觉,研究了几个小时,现在奉献给大家,截止今日最全名单如下: 金融: 自选股 微众银行 小小房贷计...

明美无限
2017/01/09
0
0
Android生活百事通生活助手源码

主要功能列表: 1)常用生活查询集成了身份证信息、手机号段归属、邮编区号查询、常用电话号码、快递查询、度量衡单位换算6项功能,均为日常生活中经常要用到的内容; 2)金融计算存款计算、...

极分享vip
2016/02/18
309
1
WinForm小程序-科学计算器和贷款计算器

用C#写的一个计算器小程序。两个TabPages,一个是科学计算器,一个是贷款计算器。 科学计算器可以完成基本的四则运算、三角和反三角函数、二八十六进制转换、阶乘和取余等运算; 贷款计算器有...

xie_cinnamon
2018/01/07
0
0
基于php的计算器开发包--bankloan

bankload bankload 是基于php开发的贷款计算器开发包。实现了按揭贷款的 等额本息 等额本金 结果的计算和输出。 已经发布到packagist上面了,开发者可以使用composer集成到自己的系统中。 作...

江边望海
2016/10/27
410
0
管理层收购MBO

今天,我读到郎咸平教授的一篇演讲,题目是《非常不幸,长虹这个故事是真实的》,讲了长虹怎么由一家优质的上市公司变为亏损的。 我强烈推荐这篇文章,大家可以看一看大型国有企业的幕后到底...

阮一峰
2007/01/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PhotoShop 高级应用:USM锐化/S锐化/防抖

、 高反差锐化+混合模式:叠加模式 【将更多的边缘细节添加到图像中】

东方墨天
24分钟前
6
0
Python数据可视化之matplotlib

常用模块导入 import numpy as npimport matplotlibimport matplotlib.mlab as mlabimport matplotlib.pyplot as pltimport matplotlib.font_manager as fmfrom mpl_toolkits.mplot3d i......

松鼠大帝
昨天
5
0
我用Bash编写了一个扫雷游戏

我在编程教学方面不是专家,但当我想更好掌握某一样东西时,会试着找出让自己乐在其中的方法。比方说,当我想在 shell 编程方面更进一步时,我决定用 Bash 编写一个扫雷游戏来加以练习。 我在...

老孟的Linux私房菜
昨天
7
0
Go语言Hello world(GOPATH和Go Module版)

本文是「vangoleo的Go语言学习笔记」系列文章之一。 官网: http://www.vangoleo.com/go/go-hello-world-02/ 往期回顾: Go语言入门-你好,Go语言 Go语言入门-Hello World(Go Playground版) 上...

vangoleo
昨天
9
0
C++虚函数以及虚函数表

在了解虚函数之前先了解下对象模型: 对象模型: 在C++中,有两种数据成员(class data members):static 和nonstatic,以及三种类成员函数(class member functions):static、nonstatic和v...

黑白双键
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部