某行去实习，让实习生做一个小页面，来计算个人存款的利息，抽空用最简单的方式写了一个
效果图
需求描述
- 题目
编写一个“存款计算器”小应用，用户通过选择存款种类、存款期限，输入存款金额后，可以计算显示出存款利息和本息合计等信息。- 要求
程序建议使用Web网页形式进行实现，通过html编写页面，通过css控制页面样式、通过javascript编写控制及计算逻辑。
若你熟悉jQuery、Vue、React、Angular等Web前端框架，可以进行使用，有额外加分。
若你对Web前端开发不了解，可以使用你熟悉的编程语言进行实现，通过标准的输入输出实现程序逻辑，并提供相应的代码或伪代码并加以注释。- 具体需求
- 输入项
1) 存款种类（选择）
数据字典：整存整取、活期
2）存款期限（选择）
数据字典：三个月、六个月、一年、二年、三年、五年
注：仅在存款种类为“整存整取”时显示该输入项，每个月按照30天计算
3）起存日期、结束日期（选择或输入）
注：仅在存款种类为“活期”时显示该输入项
4）存款金额（输入）
要求：金额需大于等于0- 输出项
1）存款利息
通过金额、存款期限或起存结束日期、年利率等计算得出
源码
github地址：https://github.com/hanxiaochuang666/personalDepositCalculator.git
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>个人存款计算器</title>
<link rel="stylesheet" type="text/css" href="./css/easyui.css">
<link rel="stylesheet" type="text/css" href="./css/icon.css">
<script type="text/javascript" src="./js/jquery.min.js">
</script>
<script type="text/javascript" src="./js/jquery.easyui.min.js">
</script>
</head>
<body>
<div id="p" class="easyui-panel" title="个人存款计算器" style="width:500px;height:600px;padding:10px;background:#fafafa;"
data-options="iconCls:'icon-save'">
<div>
<p style="color: #0000FF;">信息输入</p>
<hr />
<label for="CType">存款种类：
<select id="CType" class="easyui combobox" style="width: 300px;">
<option selected="selected">活期</option>
<option>整存整取</option>
</select>
<br /><br />
</label>
<label for="YType" id="nianxian" hidden="hidden">存款年限：
<select id="YType" class="easyui combobox" style="width: 300px;">
<option selected="selected">三个月</option>
<option>六个月</option>
<option>一年</option>
<option>二年</option>
<option>三年</option>
<option>五年</option>
</select>
<br /><br />
</label>
<label for="sDate" id="sTime">起存日期：<input id="sDate" type="text" class="easyui-datebox" data-options="prompt:'请选择起存日期',required: true,formatter:dateboxformatter,parser:parseDate"
style="width: 300px;" /><br /><br /></label>
<label for="eDate" id="eTime">结束日期：<input id="eDate" type="text" class="easyui-datebox" data-options="prompt:'请选择结束日期',required: true,formatter:dateboxformatter,parser:parseDate"
style="width: 300px;" /><br /><br /></label>
<label>年 利 率 ：
<input id="nianlilv" class="easyui-textbox" data-options="prompt:'利率', readonly:true" value="0.30%" style="width:300px" />
<br /><br />
</label>
<label id="mony">存款金额：
<input id="cunkuan" class="easyui-numberbox" data-options="min:0,prompt:'请输入金额',required: true" style="width:300px" />
<br /><br />
</label>
<p style="color: #0000FF;">计算结果</p>
<hr />
<label>存款利息：
<input id="lixi" class="easyui-textbox" data-options="readonly:true" style="width:300px" />
<br /><br />
</label>
<label>本息合计：
<input id="total" class="easyui-textbox" data-options="readonly:true" style="width:300px" />
<br /><br />
</label>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:450px;">计算利息</a>
</div>
</div>
<script>
/**
* 计算两个日期之间的天数
* @param dateString1 开始日期 yyyy-MM-dd
* @param dateString2 结束日期 yyyy-MM-dd
* @returns {number} 如果日期相同 返回一天 开始日期大于结束日期，返回0
*/
function getDaysBetween(dateString1, dateString2) {
var startDate = Date.parse(dateString1);
var endDate = Date.parse(dateString2);
if (startDate > endDate) {
alert("结束日期不能小于起存日期！");
$("#sDate").textbox('setValue');
$("#eDate").textbox('setValue');
return false;
}
if (startDate == endDate) {
return 1;
}
var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
return days;
}
// 格式化日期为 yyyy-MM-dd
function dateboxformatter(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return y + '-' + m + '-' + d;
}
function parseDate(s) {
if (!s) return new Date();
var year = s.substr(0, 4);
var month = s.substr(5, 2)
var date = s.substr(8, 2)
var y = parseInt(year, 10);
var m = parseInt(month, 10);
var d = parseInt(date, 10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
return new Date(y, m - 1, d);
} else {
return new Date();
}
}
$(function() {
// 计算结果
$('#btn').bind('click', function() {
// 1、规则校验
var ctype = $("#CType").combobox('getText');
var nianlilvstr = $("#nianlilv").val();
var lilv = nianlilvstr.substring(0,nianlilvstr.length-1);
var cunkuan = parseInt($("#cunkuan").val());
if (cunkuan <= 0) {
alert("存款金额不可空！");
return false;
}
var lixi;
var total;
// 计算结果
if (ctype == "活期") {
// 活期
// 利息 =（结束日期-开始日期）/ 365 * 年利率
// 本息合计 = 利息 + 本金
var stime = $("#sDate").datebox('getValue');
if("" == stime){
alert("起存日期不可空！");
return false;
}
var etime = $("#eDate").datebox('getValue');
if("" == etime){
alert("结束日期不可空！");
return false;
}
var dis = getDaysBetween(stime, etime);
debugger
var num = cunkuan * lilv/100 * (dis / 365);
// 保留两位小数
lixi = Math.floor(num*100)/100;
total = cunkuan + lixi;
} else {
// 整存整取
// 利息 =（所选时间段计算出日子）/ 365 * 年利率
// 本息合计 = 利息 + 本金
var n = $("#YType").combobox('getText');
var day;
if (n == "三个月") {
day = 3 * 30;
} else if (n == "六个月") {
day = 6 * 30;
} else if (n == "一年") {
day = 12 * 30;
} else if (n == "两年") {
day = 2 * 12 * 30;
} else if (n == "三年") {
day = 3 * 12 * 30;
} else if (n == "五年") {
day = 5 * 12 * 30;
}
debugger
var num = cunkuan * lilv/100 * (day / 365);
// 保留两位小数
lixi = Math.floor(num*100)/100;
total = cunkuan + lixi;
}
$("#lixi").textbox('setValue', lixi);
$("#total").textbox('setValue', total);
});
// 存款种类change事件
$("#CType").combobox({
onChange: function(n, o) {
//这里的参数n是select改变后的value,o是改变前的value
console.log("存款种类选择：" + n);
$("#lixi").textbox('setValue');
$("#total").textbox('setValue');
if (n == "活期") {
$("#nianxian").hide();
$("#sTime").show();
$("#eTime").show();
$("#nianlilv").textbox('setValue', '0.30%');
} else {
$("#sTime").hide();
$("#eTime").hide();
$("#nianxian").show();
$("#nianlilv").textbox('setValue', '1.35%');
}
}
});
// 存款年限变化后自动设置利率
$("#YType").combobox({
onChange: function(n, o) {
//这里的参数n是select改变后的value,o是改变前的value
console.log("存款年限选择：" + n);
$("#lixi").textbox('setValue');
$("#total").textbox('setValue');
if (n == "三个月") {
$("#nianlilv").textbox('setValue', '1.35%');
} else if (n == "六个月") {
$("#nianlilv").textbox('setValue', '1.55%');
} else if (n == "一年") {
$("#nianlilv").textbox('setValue', '1.75%');
} else if (n == "两年") {
$("#nianlilv").textbox('setValue', '2.25%');
} else if (n == "三年") {
$("#nianlilv").textbox('setValue', '2.75%');
} else if (n == "五年") {
$("#nianlilv").textbox('setValue', '2.75%');
}
}
});
});
</script>
</body>
</html>
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
