最近有個需求，需要制作一個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">
<!--
作者：[email protected]
時間：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>
<!--
作者：[email protected]
時間：2016-08-05
描述：活期存款
-->
<div id="item2" class="mui-control-content mui-active">
<!--
作者：[email protected]
時間：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>
<!--
作者：[email protected]
時間：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>
<!--
作者：[email protected]
時間：2016-08-05
描述：定期存款
-->
<div id="item3" class="mui-control-content">
<!--
作者：[email protected]
時間：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>
<!--
作者：[email protected]
時間：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