小工具--理财计算器

最新推荐文章于 2023-04-22 00:07:07 发布
最新推荐文章于 2023-04-22 00:07:07 发布
阅读量4.1k 收藏 5
点赞数 1
文章标签： html css jquery js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44544465/article/details/86566054
版权

先看代码运行效果，输入相应的数据后点击开始计算，显示如下：

一开始先搭建好页面，这个界面用了插件bootstrap-3.3.7-dist，然后根据数学计算算出相关的本息，金额等数据，直接上代码：

页面搭建代码如下：


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .input-group-addon{
            display:inline-block;
            width:91px;
            margin-left:-15px;
            height:34px
        }
    </style>
</head>
<body>
    <div style="margin:50px;">
        <div class="panel panel-primary" style="border-color:darkgrey;width:80%;margin-left:140px;border: 1px solid rgba(0,0,0,.2);">
            <div class="modal-header ">
                <h4 class="modal-title" style="color:darkgrey;display:inline-block;">理财计算器</h4>
            </div>
            <div class="row">
                <form id="form">
                    <div class="col-md-6">
                        <div class="form-group" style="margin:25px">
                            <div class="col-lg-3 col-md-3 col-sm-3 text-right" style="margin-top:7px">
                                <label class="control-label">投资金额</label>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 reset">
                                <input type="text" class="form-control" style="border-radius:4px 0 0 4px" id="Invest" onkeyup="value = value.replace(/[^\d.]/g, '')" />
                            </div>
                            <div class="input-group-addon" style="width:50px">
                                <span style="display:inline-block;margin-top:4px">元</span>
                            </div>
                        </div>
                        <div class="form-group" style="margin:25px">
                            <div class="col-lg-3 col-md-3 col-sm-3 text-right" style="margin-top:7px">
                                <label class="control-label">借款期限</label>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 reset">
                                <input type="text" class="form-control" style="border-radius:4px 0 0 4px" id="Deadline" onkeyup="value=value.replace(/[^\d]/g,'')" />
                            </div>
                            <div class="input-group-addon">
                                <div class="col-lg-8 col-md-8 col-sm-8 reset" style="margin-top:3px;margin-left:-10px">
                                    <input type="radio" name="date" value="Moth" />月
                                    <input type="radio" name="date" value="Day" />天
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group" style="margin:25px">
                            <div class="col-lg-3 col-md-3 col-sm-3 text-right" style="margin-top:7px">
                                <label class="control-label">年化收益</label>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 reset">
                                <input type="text" class="form-control" style="border-radius:4px 0 0 4px" id="Earnings" onkeyup="value = value.replace(/[^\d.]/g, '')" />
                            </div>
                            <div class="input-group-addon" style="width:50px">
                                <span style="display:inline-block;margin-top:4px">%</span>
                            </div>
                        </div>
                        <div class="form-group" style="margin:25px">
                            <div class="col-lg-3 col-md-3 col-sm-3 text-right" style="margin-top:7px">
                                <label class="control-label">还款方式</label>
                            </div>
                            <div class="col-lg-5 col-md-5 col-sm-5 reset">
                                <select type="text" class="form-control" id="Type">
                                    <option value="1">按月付息，到期还款</option>
                                    <option value="2">按天计息，到期还款</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>               
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 text-center" style="margin-top:10px;">
                    <button class="btn btn-info" type="button" id="StartCounting">开始计算</button>
                    <button class="btn btn-danger" type="button" id="Reset">重置数据</button>
                </div>
            </div>
            <div class="row" style="margin-left:0;width:100%;">
                <div style="margin-left:365px;margin-top:30px">
                    <div>
                        <label>投资金额：</label>
                        <input type="text" id="Investmoney" style="border:none;" readonly value="元"/>
                        <label style="display:inline-block;margin-left:60px;">利息收益：</label>
                        <input type="text" style="border:none;" id="LXSY" readonly value="元"/>
                    </div>
                    <div>
                        <label>投资期限：</label>
                        <input type="text" id="deadline" style="border:none;" readonly value=""/>
                        <label style="display:inline-block;margin-left:60px;">本息合计：</label>
                        <input type="text" style="border:none;" id="BXHJ" readonly value="元"/>
                    </div>  
                </div>                                     
            </div>
            <div class="row" style="margin-left:0;width:100%;margin-top:35px;">
                <table class="table" id="table">
                    <tr>
                        <th style="text-align:center">期数</th>
                        <th style="text-align:center">每月还款本息</th>
                        <th style="text-align:center">应还本金</th>
                        <th style="text-align:center">应还利息</th>
                        <th style="text-align:center">剩余回款本息</th>
                    </tr>
                </table>
            </div>
        </div>        
    </div>
    <script src="~/Content/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-2.0.3.min.js"></script>
</body>
</html>

 

然后下面是实现功能js代码，主要都是一些判断和计算：

//重置数据
        var Reset = document.getElementById("Reset");
        Reset.onclick = function () {
            location.reload();
        }

        $("#StartCounting").click(function () {
            var Invest = $("#Invest").val();//投资金额
            $("#Investmoney").val(Invest + "元");//投资金额
            var Date = $("#form input:checked").val();
            var Deadline = $("#Deadline").val();//借款期限
            if (Date == "Moth") {
                $("#deadline").val(Deadline + "个月");//日期
                var Annualized = $("#Earnings").val() / 100;
                var AA = (Invest * Annualized) / 12 * Deadline;
                $("#LXSY").val(AA + "元");//利息
                $("#BXHJ").val(parseInt(Invest) + parseInt(AA) + "元");//本息合计
                $("#Type").val(1);
                var MYHKBX = (Invest * Annualized) / 12 + Invest / Deadline;
                var YHBJ = Invest / Deadline;
                var YHLX = (Invest * Annualized) / 12;                
                for (var i = 1; i < parseInt(Deadline) + 1; i++) {
                    var SYHKBX = parseInt(Invest) + parseInt(AA) - (MYHKBX * i);
                    $("#table").append("<tr><td style='text-align:center'>" + i
                        + "</td><td style='text-align:center'>" + MYHKBX + "元"
                        + "</td><td style='text-align:center'>" + YHBJ + "元"
                        + "</td><td style='text-align:center'>" + YHLX + "元"
                        + "</td><td style='text-align:center'>" + SYHKBX + "元" + "</td>");
                }
            }
            if (Date == "Day") {
                $("#deadline").val(Deadline + "天");//日期
                var Annualized = $("#Earnings").val() / 100;
                var BB = (Invest * Annualized) / 365 * Deadline;//利息
                $("#LXSY").val(BB + "元");//利息
                $("#BXHJ").val(parseInt(Invest) + parseInt(BB) + "元")//本息合计
                $("#Type").val(2);
                var MYHKBX = (Invest * Annualized) / 12 + Invest / Deadline;
                var YHBJ = Invest / Deadline;
                var YHLX = (Invest * Annualized) / 12;
                for (var i = 1; i < parseInt(Deadline) + 1; i++) {
                    var SYHKBX = parseInt(Invest) + parseInt(BB) - (MYHKBX * i);
                    $("#table").append("<tr><td style='text-align:center'>" + i
                        + "</td><td style='text-align:center'>" + MYHKBX + "元"
                        + "</td><td style='text-align:center'>" + YHBJ + "元"
                        + "</td><td style='text-align:center'>" + YHLX + "元"
                        + "</td><td style='text-align:center'>" + SYHKBX + "元" + "</td>")
                }
            }
        })

 

Dec_tail
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
小工具-金融理财计算器小程序源码
03-21
"金融理财计算器微信小程序模板源码"为金融从业者和普通用户提供了一个直观、易用的计算工具，利用纯前端技术降低了部署难度。开发者可以根据自己的需求对源码进行定制，打造个性化的小程序，为用户提供更专业的金融...
082-微信小程序-金融理财计算器.zip
最新发布
06-11
"082-微信小程序-金融理财计算器.zip"这个压缩包包含了一个金融理财计算器的源代码和相关截图，旨在帮助开发者了解如何在微信小程序中构建这样的应用。 首先，我们要知道微信小程序的开发环境。它基于JavaScript，...
微信小程序 金融理财计算器（截图+源码）
05-11
微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）微信小程序 金融理财计算器（截图+源码）
存款利息计算器html代码,html+jQuery简单的利息计算器
weixin_32367041的博客
06-09 609
计算利息的公式：利息=本金*利率/计息*(到期日期-起息日期)但是每次都要自己算很麻烦，不如开发个小东西，直接输入就可以得出利息，用了一点时间做好了，虽然简单，还是想奉献给大家~--index.html--利息计算$(document).ready(function(){$("#btn").click(function(){var benjin=$("#benjin").val();var lil...
HTML + CSS + javascript 实现web版计算器
qq_39330735的博客
11-11 1634
一个简单的HTML计算器，有代码详解注释，这里运用了javascript，需要搭建相应的java环境，就Visual Studio Code的丢进去就可以运行
利用java实现一个理财计算器的面板，实现相关计算功能
hehhxbd的博客
04-22 177
java面板实现金融计算器
工具-金融理财计算器.zip
09-05
我们的小程序项目源码还采用了一些常用的技术和工具，以提高开发效率和代码质量。例如，我们使用了微信小程序开发框架，它提供了一系列的API和组件，使得开发人员可以快速构建小程序应用。我们还使用了Vue.js作为...
安卓应用-手机工具-理财计算器app v1.0.5 安卓版.zip
08-14
理财计算器App是一款专为安卓用户设计的金融管理工具，它集成了多种理财计算功能，旨在帮助用户更好地管理和规划个人财务。v1.0.5版本是该应用的最新更新，通常包括性能优化、bug修复以及可能的新功能添加。在这款...
微信小程序源码-小工具类：金融理财计算器.rar
05-01
在这个“微信小程序源码-小工具类：金融理财计算器”的项目中，我们可以深入探讨以下几个核心知识点： 1. **微信小程序结构**： 微信小程序的开发遵循特定的目录结构，包括`app.js`、`app.json`、`app.wxss`等基础...
PHP+H5简单数字理财源码带热度机制
06-09
程序比较简单，进场是按区块来计算盈利, 每个区块进场必须按照区块价值5%的比例来销毁平台币WBH1。当区块达到3倍后，会进入失效状态，此时等待7天后，可以申请区块提现，所有分红以红包形式发放.购买的区块随机抽取10名平分当天2%的奖励
投资理财在线计算器js特效代码.zip
07-11
投资理财在线计算器js特效代码，通常用于银行网站，或者一些金融网站，在手机端用的较多，php中文网推荐下载！
理财计算器原型
04-25
用于计算理财的相应收益，用axure制作，可以实现耕种功能
理财计算器
09-15
理财计算器，之前一直想找个理财计算器，没找到合适的，于是自己写了个，特分享给大家。包含定期、定投、年化三种方式。 一、输入金额、预期利率、计划投资年数，复利计算出到期后本息总和。 二、给父母或儿女存的，输入每年投资金额、预期利率、投资年数，复利计算出到期后本息和。 三、年化主要是用来推算，很多时候选择基金，看基金的历史收益，但是年数不一样，不知道具体哪只基金成长更好，年化计算器输入开始日期、截止日期、期间总收益率，本金默认输入100，反推出复合年化收益率
单机版个人理财存款计算器
12-02
本计算机支持活期存款、定期存款计算，自定义存款利率，使用起来方便灵活。 http://api.money.rj.91.com/91Money_root/91MoneyPlugins/MoneyDeposit_V0.1.0.0.Beta.131705.rar
存款利息计算器html代码,存款收益计算器.html
weixin_30647423的博客
06-09 473
// 创建标签var div=document.createElement('div');document.body.appendChild(div);var div=document.querySelector('div');div.style.width='500px';div.style.height='600px';div.style.border='1px solid orange';d...
理财小工具（二）贷款计算器
weixin_30687811的博客
08-05 288
最近有个需求，需要制作一个web端的小工具-----贷款计算器 先说下我的环境： Hbuilder 简直是神器，非常好用 mui Hbuilder自带，同为Dcloud公司产品 搭页面： <!doctype html> <html> <head> <meta charset="UTF-8"> ...
懒人投资算法计算器
04-16
NULL 博文链接：https://wangel.iteye.com/blog/1798344
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值