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

最近有个需求，需要制作一个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

转载于:https://www.cnblogs.com/wobeinianqing/p/5742583.html

理财小工具（二）贷款计算器相关推荐

使用pyqt5制作简单时钟小工具
一.概述本文我们将介绍如何使用python+pyqt5在制作桌面时钟小工具二.引言此篇文章是我在学习pyqt5中多线程相关的Qtimer时,随手制作的小工具,最终打包成exe可执行文件在桌面随时 ...
python小工具myqr生成动态二维码
python小工具myqr生成动态二维码 (一)安装 (二)使用 (一)安装命令: pip install myqr 安装完成后,就可以在命令行中输入 myqr 查看下使用帮助: myqr --he ...
WPF 开源二维绘画小工具 GeometryToolDemo 项目
这是一个演示 WPF 进行二维绘画的小工具 Demo 项目,基于 MIT 协议在 GitHub 上完全开源源作者是 YuWeiCong 我只是帮助开源的工具人软件运行界面效果: 开源地址: htt ...
VB / VBA 自制二维码小工具
现在二维码的使用越来越广泛了,广告.网址等等都用上了从网上找了一个二维码的控件,自己做了个小工具. 二维码可以把一串字符,不管长短(没试过最长能多长),做成二维码图片现在的的智能手机软件很多都有扫 ...
微信开发者工具如何模拟调试扫描小程序二维码功能
本文主要介绍如何在微信开发者工具中模拟调试现场扫描小程序二维码功能场景. 1.添加自定义编译模式在微信开发者工具内如下图所示,添加编译模式: 2.启动页面设置在启动页选项中填入扫描小程序二维码后要 ...
自动生成小工具（二）：根据建表sql自动生成增删改查sql语句文件
Mybatis自动生成插件虽然功能强大,但是也略显笨重.我自己开发了一个自动生成的小工具,更加简单,更加轻量级. 一共只有几百行代码,想改的话,直接修改即可.根据自己的实际情况,可以进行灵活的二次开发 ...
通过web系统实现淘宝营销引流，小说或者视频上传之后自动生成二维码，通过二维码分享之后引入微信或者扣扣加群，群满自动切换到下一个，以及数据统计分析和若干个小工具集成
通过web系统实现淘宝营销引流,小说或者视频上传之后自动生成二维码,通过二维码分享之后引入微信或者扣扣加群,群满自动切换到下一个,以及数据统计分析和若干个小工具集成. 主要实现技术: 1.大文件视频分 ...
IOS端二维码小工具
JSbox是苹果IOS端的一个app,可以将JavaScript代码翻译成IOS端的原生程序,它的文档地址是https://docs.xteko.com/,但是在2020.10.03以后就停止更新了, ...
微信小程序二维码生成工具，后端二维码生成工具类。
微信小程序开发二维码生成工具类前言业务背景设计思路具体实现接下来我们进行工具的改造前言或许这是你搜寻的第n篇文章来解决你项目中的问题,虽然我不能去替你完全适配你的业务需求,但是我可以给你 ...

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

理财小工具（二）贷款计算器相关推荐

最新文章

热门文章