就是这个样的粗爆,手搓一个计算器:还款计算器

news/2024/10/20 18:05:26/

       作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。

HTML:

<div class="calculator">
<label for="loanAmount">贷款金额 (元):</label> 
<input id="loanAmount" type="number" placeholder="输入贷款金额"> 
<label for="interestRate">年利率 (%):</label> 
<input id="interestRate" type="number" placeholder="输入年利率"> 
<label for="loanTerm">贷款年限 (年):</label> 
<input id="loanTerm" type="number" placeholder="输入贷款年限">
<button onclick="calculateRepayment()">计算还款额</button>
<div id="result" class="result">结果将显示在这里</div>
</div>
<div class="guide">
<pre>操作指南<br><br>
1. 输入贷款金额、年利率和贷款年限。<br><br>
2. 点击“计算还款额”按钮,计算每月还款额和总还款额。
</pre>
</div>

JS:

javascript"> function calculateRepayment() {const loanAmount = parseFloat(document.getElementById('loanAmount').value);const interestRate = parseFloat(document.getElementById('interestRate').value) / 100 / 12; // 将年利率转换为月利率const loanTerm = parseInt(document.getElementById('loanTerm').value) * 12; // 将贷款年限转换为月数if (isNaN(loanAmount) || isNaN(interestRate) || isNaN(loanTerm)) {document.getElementById('result').textContent = "请输入有效的贷款金额、利率和年限。";return;}// 等额本息还款公式:每月还款额 = [贷款金额 × 月利率 × (1 + 月利率)^还款月数] / [(1 + 月利率)^还款月数 - 1]const monthlyRepayment = (loanAmount * interestRate * Math.pow(1 + interestRate, loanTerm)) / (Math.pow(1 + interestRate, loanTerm) - 1);const totalRepayment = monthlyRepayment * loanTerm;document.getElementById('result').innerHTML = `每月还款额:${monthlyRepayment.toFixed(2)} 元<br>` +`总还款额:${totalRepayment.toFixed(2)} 元`;}

CSS:

.calculator {width: 100%;background-color: #333;color: white;padding: 20px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}label {display: block;margin-bottom: 10px;font-size: 16px;
}input, select {width: 100%!important;padding: 10px!important;margin-bottom: 20px;color: #000000; border-radius: 5px;border: 1px solid #555;font-size: 16px!important;background-color: #ffffff!important;
}button {width: 100%;padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;
}button:hover {background-color: orange;
}.result {font-size: 18px;margin-top: 20px;text-align: center;
}option {background-color: #ffffff;
}p {font-size: 18px;margin-top: 5px!important;
}

 线上运行,可以直接打开:还款计算器


http://www.ppmy.cn/news/1540582.html

相关文章

保护企业终端安全,天锐DLP帮助企业智能管控终端资产

为有效预防员工非法调包公司的软硬件终端资产&#xff0c;企业管理员必须建立高效的企业终端安全管控机制&#xff0c;确保能够即时洞察并确认公司所有软硬件资产的状态变化。这要求企业要有一套能够全面管理终端资产的管理系统&#xff0c;确保任何未经授权的资产变动都能被迅…

【HTML】构建网页的基石

我的主页&#xff1a;2的n次方_ HTML 是一种超文本标记语言&#xff0c;不仅有文本&#xff0c;还能包含图片&#xff0c;音频等 1. HTML 的文件基本结构 html 标签是整个 html 文件的最顶层标签&#xff0c;head 标签中写页面的属性&#xff0c;body 标签是页面中显示的…

生成 Excel 表列名称

Excel 大家都用过&#xff0c;它的列名是用字母编号的&#xff0c;A 表示第一列&#xff0c;B 表示第二列&#xff0c;AA 表示第27列&#xff0c;AB 表示第28列等等。 现给定一个数字&#xff0c;如何得到列名称呢。比如输入28&#xff0c;输出 AB。 一开始以为就是一个简单的…

大数据比对,shell脚本与hive技术结合

需求描述 从主机中获取加密数据内容&#xff0c;解密数据内容&#xff08;可能会存在json解析&#xff09;插入到另一个库中&#xff0c;比对原始库和新库的相同表数据的数据一致性内容。 数据一致性比对实现 上亿条数据&#xff0c;如何比对并发现两个表数据差异 相关流程…

基于Flink MySQL CDC技术实现交易告警

前言 CDC 的全称是 Change Data Capture&#xff0c;是一种用于捕获数据库变更数据的技术。例如 MySQL 对数据的所有变更都会写入到 binlog&#xff0c;CDC 就可以通过监听 binlog 文件来实现对 MySQL 数据变更的捕获&#xff0c;然后做进一步的处理。 Flink CDC 将CDC技术和…

数字化转型的成功路径:最佳实践与实施技巧深度解析

在全球化和技术革命的双重推动下&#xff0c;企业正面临前所未有的市场竞争和运营压力。为了适应这种变化&#xff0c;企业纷纷开始了数字化转型的进程&#xff0c;希望借助技术力量提升效率、推动创新并保持竞争优势。尽管数字化转型的趋势已不可逆&#xff0c;但如何真正落地…

火山引擎数智平台 VeDI:A/B 实验互斥域流量分配体系上线

近日&#xff0c;火山引擎 A/B 测试平台(DataTester)完成了一次重要升级&#xff0c;推出互斥域流量分配体系&#xff0c;这一功能意味着企业在产品优化策略上有新的突破空间。此次升级的核心亮点是允许企业根据实际需求&#xff0c;灵活地将用户流量分割成多个独立的区块&…

ORACLE SELECT INTO 赋值为空,抛出 NO DATA FOUND 异常

例子&#xff1a; DECLARE ORDER_NUM VARCHAR2(20); BEGIN SELECT S.ORDER_NUM INTO ORDER_NUM FROM SALES_ORDER S WHERE S.ID122344; DBMS_OUTPUT.PUT_LINE(单号: || ORDER_NUM); END; 在查询结果为空的情况下&#xff0c;以上代码会报错&#xff1a;未找到任何数据 解决方…