tit2018network
/
bank.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人存款计算器</title>
		<link rel="shortcut icon" href="img/logo.png">
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script>
			function calc(){
				//取得用户所输入的金额
				num1 = $("#num1").val();
				regExp = /^[0-9]{1,8}$/;
				if(!regExp.test(num1)){
					$("#num1").val("必须是1~8位数字").css("color","red");
					return;
				}
				number1 = parseInt(num1);
				// 取得存款年限
				year1 = $("#year option:selected").text();
				// 计算利息
				if (year1 == "两年"){
					num2 = $("#year").val()*number1*2;
				}
				else if (year1 == "三年"){
					num2 = $("#year").val()*number1*3;
				}
				else if (year1 == "五年"){
					num2 = $("#year").val()*number1*5;
				}
				else{
					num2 = $("#year").val()*number1*1;
				}
				//计算本息合计
				total = number1 + num2;
				//填入表格
				$("#num2").val(num2);
				$("#num3").val(total);
			}
			function clearNum1(){
				$("#num1").val("").css("color","");
			}
		</script>
	</head>
	<body>
		<!-- center-block让div居中 -->
		<div style="width:50%;" class="center-block text-center">
			<div>
				<img src="img/cmb.png" alt="">
			</div>
			<table class="table table-bordered">
				<tr class="bg-primary">
					<td colspan="2">个人存款计算</td>
				</tr>
				<tr>
					<td class="text-right">存款金额</td>
					<td><input type="text" id="num1" class="form-control"  onfocus="clearNum1()"></td>
				</tr>
				<tr>
					<td class="text-right">存款期限</td>
					<td>
						<select class="form-control" id="year">
							<option value ="0.0175">一年</option>
							<option value ="0.0225">两年</option>
							<option value ="0.0275">三年</option>
							<option value ="0.0275">五年</option>
						</select>
					</td>
				</tr>
				<tr>
					<td class="text-right">所得利息</td>
					<td><input type="text" id="num2" class="form-control" readonly="readonly"></td>
				</tr>
				<tr>
					<td class="text-right">本息合计</td>
					<td><input type="text" id="num3" class="form-control" readonly="readonly"></td>
				</tr>
				<tr>
					<td colspan="2">
						<button type="button" class="btn btn-primary btn-block" onclick="calc()">开始计算</button>
					</td>
				</tr>
			</table>
			<div>开发者:182055116谭艺</div>
		</div>
	</body>
</html>