小草二手房_H5/calculator.html · 约 2430 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8"/>
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
6<title>房贷计算器 · 小草二手房</title>
7<link rel="stylesheet" href="style.css"/>
8</head>
9<body>
10
11<header class="header"><a class="back" onclick="history.back()">‹</a><h1>房贷计算器</h1><span class="right"></span></header>
12<div class="cal-card">
13 <div class="cal-row"><span class="cr-label">房屋总价</span><input class="cr-input" id="total" type="number" value="2000000" oninput="calcMortgage()"/><span class="cr-unit">元</span></div>
14 <div class="cal-row"><span class="cr-label">首付比例</span><input class="cr-input" id="down" type="number" value="30" oninput="calcMortgage()"/><span class="cr-unit">%</span></div>
15 <div class="cal-row"><span class="cr-label">贷款年限</span><input class="cr-input" id="years" type="number" value="30" oninput="calcMortgage()"/><span class="cr-unit">年</span></div>
16 <div class="cal-row" style="border-bottom:none"><span class="cr-label">年利率</span><input class="cr-input" id="rate" type="number" value="3.1" step="0.05" oninput="calcMortgage()"/><span class="cr-unit">%</span></div>
17</div>
18<div class="result-box">
19 <div style="font-size:12px;opacity:.9">每月月供（等额本息）</div>
20 <div class="rb-month" id="mMonth">--</div>
21 <div style="font-size:12px;opacity:.9">元/月</div>
22 <div class="rb-row">
23 <div class="rb-cell">贷款总额<br/><b id="mLoan">--</b></div>
24 <div class="rb-cell">首付款<br/><b id="mDown">--</b></div>
25 <div class="rb-cell">总利息<br/><b id="mInterest">--</b></div>
26 </div>
27</div>
28<div class="card" style="font-size:12px;color:#7b8db0;line-height:1.8">
29 💡 提示：以上为估算结果，实际利率与还款方式以银行审批为准。公积金贷款可享更低利率。
30</div>
31<script>calcMortgage();</script>
32
33<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="list.html"><span class="icon">🏘️</span>找房</a><a class=" active" href="calculator.html"><span class="icon">🧮</span>房贷</a><a class="" href="agent.html"><span class="icon">🤝</span>经纪人</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
34<script src="data.js"></script>
35<script src="app.js"></script>
36</body>
37</html>