経済・金融関連 収益型ブログの場合、ローンが自己計算機を提供する場合があります。私はずっと前に、jQueryで作成されたローン利子計算機のソースを純粋なJavaScriptに変更し、機能を強化し、テスト目的でローン利子計算機を作成しました。
不要なプラグインのインストールなしで、軽くて速い バニラJavaScript（Vanilla JS）で実装したローンであり、電卓です。
この記事では、原理金均等、元金均等、満期日時の3つの返済方式はもちろん、実際のローン実行時に必ず必要な「据え置き期間」計算ロジックまで含まれる完成型コード（JavaScriptを）を共有します。 PCやモバイルのどこでもきれいに見えるレスポンシブデザインを適用して、金融関連のブログや不動産サイトを運営する場合に便利に活用できるはずです。
ローン金利計算機のソースコード（JavaScript）
テストで使用するために既存の逮捕されたインターフェースを改善し、経過期間機能を追加したローン利息計算機 WordPressドラゴンで作ってみました。
ずっと前にjQueryで作成したものをバニラのJavaScriptに切り替えることで、スピードの面でも素早く動作します。
鍵はJavaScriptコードです。以下のコードを利用できます。次のコードをチャットGPTに入れて、ローン全体が自己計算機を作成するように依頼できます。
document.addEventListener("DOMContentLoaded", function() {
// DOM Elements
const elLoan = document.getElementById('loan_amt');
const elRate = document.getElementById('loan_rate');
const elPeriod = document.getElementById('loan_period');
const elGrace = document.getElementById('grace_period');
const elGraceFake = document.getElementById('grace_period_fake');
const btnCalc = document.getElementById('btn_calculate');
const btnReset = document.getElementById('btn_reset');
const resultSection = document.getElementById('result_area');
const graceButtons = document.querySelectorAll('.btn-grace');
// 1. 초기화 및 이벤트 바인딩
initEvents();
function initEvents() {
// 숫자 콤마 포맷팅
elLoan.addEventListener('keyup', function(e) {
let val = e.target.value.replace(/[^0-9]/g, '');
e.target.value = val ? Number(val).toLocaleString('en-US') : '';
});
// 상환 방식 변경 감지
const radios = document.getElementsByName('repayment_type');
radios.forEach(radio => {
radio.addEventListener('change', handleTypeChange);
});
// 계산하기
btnCalc.addEventListener('click', calculateLoan);
// 리셋
btnReset.addEventListener('click', resetCalculator);
}
function handleTypeChange() {
const type = document.querySelector('input[name="repayment_type"]:checked').value;
const isMaturity = (type === 'maturity');
if (isMaturity) {
elGrace.style.display = 'none';
elGraceFake.style.display = 'block';
elGrace.value = 0;
graceButtons.forEach(btn => btn.disabled = true);
} else {
elGrace.style.display = 'block';
elGraceFake.style.display = 'none';
graceButtons.forEach(btn => btn.disabled = false);
}
resultSection.style.display = 'none';
}
// 2. 헬퍼 함수
window.addAmount = function(amount) {
let current = parseInt(elLoan.value.replace(/,/g, '')) || 0;
elLoan.value = (current + amount).toLocaleString('en-US');
};
window.setRate = function(rate) { elRate.value = rate; };
window.setPeriod = function(month) { elPeriod.value = month; };
window.setGrace = function(month) {
if(elGrace.style.display !== 'none') elGrace.value = month;
};
// 3. 핵심 계산 로직
function calculateLoan() {
const principal = parseInt(elLoan.value.replace(/,/g, ''));
const rateYear = parseFloat(elRate.value);
const totalPeriod = parseInt(elPeriod.value);
const gracePeriod = parseInt(elGrace.value) || 0;
const type = document.querySelector('input[name="repayment_type"]:checked').value;
if (!principal || !rateYear || !totalPeriod) {
alert('대출금, 금리, 기간을 모두 입력해주세요.');
return;
}
if (type !== 'maturity' && gracePeriod >= totalPeriod) {
alert('거치기간은 대출기간보다 작아야 합니다.');
return;
}
let schedule = [];
let totalInterest = 0;
if (type === 'equal_repayment') {
schedule = calcEqualRepayment(principal, rateYear, totalPeriod, gracePeriod);
} else if (type === 'equal_principal') {
schedule = calcEqualPrincipal(principal, rateYear, totalPeriod, gracePeriod);
} else {
schedule = calcMaturity(principal, rateYear, totalPeriod);
}
renderResult(principal, schedule);
}
// [알고리즘 1] 원리금 균등 (거치 포함)
function calcEqualRepayment(principal, rateYear, totalPeriod, gracePeriod) {
let schedule = [];
let balance = principal;
let rateMonth = rateYear / 100 / 12;
let amortizePeriod = totalPeriod - gracePeriod;
let pmt = 0;
if (amortizePeriod > 0) {
pmt = principal * rateMonth * Math.pow(1 + rateMonth, amortizePeriod) / (Math.pow(1 + rateMonth, amortizePeriod) - 1);
pmt = Math.floor(pmt);
}
for (let i = 1; i <= totalPeriod; i++) {
let interest = Math.floor(balance * rateMonth);
let principalPaid = 0;
let monthlyTotal = 0;
if (i <= gracePeriod) {
principalPaid = 0;
monthlyTotal = interest;
} else {
monthlyTotal = pmt;
principalPaid = monthlyTotal - interest;
if (i === totalPeriod || balance - principalPaid < 10) {
principalPaid = balance;
monthlyTotal = principalPaid + interest;
}
}
balance -= principalPaid;
if (balance < 0) balance = 0;
schedule.push({
turn: i,
principal: principalPaid,
interest: interest,
total: monthlyTotal,
balance: balance,
isGrace: (i <= gracePeriod)
});
}
return schedule;
}
// [알고리즘 2] 원금 균등 (거치 포함)
function calcEqualPrincipal(principal, rateYear, totalPeriod, gracePeriod) {
let schedule = [];
let balance = principal;
let rateMonth = rateYear / 100 / 12;
let amortizePeriod = totalPeriod - gracePeriod;
let principalPerMonth = Math.floor(principal / amortizePeriod);
for (let i = 1; i <= totalPeriod; i++) {
let interest = Math.floor(balance * rateMonth);
let principalPaid = 0;
if (i <= gracePeriod) {
principalPaid = 0;
} else {
principalPaid = principalPerMonth;
if (i === totalPeriod) principalPaid = balance;
}
let monthlyTotal = principalPaid + interest;
balance -= principalPaid;
schedule.push({
turn: i,
principal: principalPaid,
interest: interest,
total: monthlyTotal,
balance: balance,
isGrace: (i <= gracePeriod)
});
}
return schedule;
}
// [알고리즘 3] 만기 일시 (거치 없음)
function calcMaturity(principal, rateYear, totalPeriod) {
let schedule = [];
let rateMonth = rateYear / 100 / 12;
let interest = Math.floor(principal * rateMonth);
for (let i = 1; i <= totalPeriod; i++) {
let principalPaid = 0;
let monthlyTotal = interest;
let balance = principal;
if (i === totalPeriod) {
principalPaid = principal;
monthlyTotal = principal + interest;
balance = 0;
}
schedule.push({
turn: i,
principal: principalPaid,
interest: interest,
total: monthlyTotal,
balance: balance,
isGrace: false
});
}
return schedule;
}
function renderResult(principal, schedule) {
const tbody = document.querySelector('#schedule_table tbody');
tbody.innerHTML = '';
let totalInterest = 0;
let totalPayment = 0;
const frag = document.createDocumentFragment();
schedule.forEach(row => {
totalInterest += row.interest;
totalPayment += row.total;
const tr = document.createElement('tr');
if (row.isGrace) tr.classList.add('grace-period-row');
tr.innerHTML = `
<td>${row.turn}</td>
<td>${row.principal.toLocaleString()}</td>
<td>${row.interest.toLocaleString()}</td>
<td style="font-weight:bold; color:#3b82f6;">${row.total.toLocaleString()}</td>
<td>${Math.floor(row.balance).toLocaleString()}</td>
`;
frag.appendChild(tr);
});
tbody.appendChild(frag);
document.getElementById('res_principal').textContent = principal.toLocaleString();
document.getElementById('res_interest').textContent = totalInterest.toLocaleString();
document.getElementById('res_total').textContent = totalPayment.toLocaleString();
resultSection.style.display = 'block';
resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function resetCalculator() {
elLoan.value = '';
elRate.value = '';
elPeriod.value = '';
elGrace.value = '0';
resultSection.style.display = 'none';
document.getElementById('type_1').checked = true;
handleTypeChange();
}
});参考までに WordPressの場合、JSコードをEnquque方式でそのページにのみロードする チャイルドテーマの関数ファイルにコードを配置すると、速度への影響を最小限に抑えることができます。
HTMLとCSSモードは、Chat GPTやGeminiを利用すればよく知ってうまく作ってくれるでしょう。上記のJSコードを改善したり、機能を追加するように変更することも可能です。
実際の動作は、 ローン金利計算機ページを参考にしてください。他のローンが自計算機の結果と比較してみると、エラーなくうまく機能しているようです。
ティーストーリー、 GNUBOARD 他のCMSでも応用すれば、好きなレイアウトにすることができます。
最後に、
私はいくつかの簡単なツールをテスト目的として WordPressに切り替えてご提供しております。その中で、ロト番号ジェネレータはGoogle検索結果1ページに公開され、着実に訪問者が流入しています。 😄
ロト当選番号照会 小コードを次の記事で参照できます。
ローン金利計算機は競争が激しくてグーグル検索結果から後方に押されてきちんと流入にはなりませんね。 😥
本当に便利な情報ですね！バニラのJavaScriptで作られているので軽くて性能もいいですし、おかげで私も一度試してみるべきです。
提供されたJSコードをチャットgptやジェミナイ、あるいはクロードに入れてお好みのデザインを入力すれば分かって完全なコードをうまく作ってくれると思います。最近はAIのため初心者でも簡単にコーディングが可能な時代となりました。ただし、コードに関する知識がまったくない場合は、必要に応じて実装するのは簡単ではないかもしれません。
今日一日中ワード様の貸し手と電卓を参考にしていただき、JavaScriptのせいでしばらく苦労しましたが、結局成功してからこんなポスティングが上がりますね。作る過程で学ぶこともしたが、なんだか悔しい感じです。
本来は日曜日に上げようとしましたが、日曜日と月曜日の午後まで時間がなくて少し遅れました。こういうと思ったら日曜日遅くでも上げることを間違えましたね。
それでも自分でやってみれば作ってみるとたくさんのことを学ぶことになります。 😀