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