<복리 계산 프로그램 코드>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>복리 계산기</title>
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
label { display: block; margin-top: 10px; }
input { padding: 6px; width: 200px; }
button { margin-top: 15px; padding: 10px 18px; }
table { margin-top: 25px; border-collapse: collapse; width: 600px; }
th, td { border: 1px solid #aaa; padding: 8px; text-align: right; }
th { background: #eee; }
</style>
</head>
<body>
<h2>복리 계산 프로그램 (웹 버전)</h2>
<label>초기 금액<br><input type="text" id="initial" value="1,000,000" oninput="formatNumber(this)"></label>
<label>기간별 추가 금액<br><input type="text" id="addVal" value="100,000" oninput="formatNumber(this)"></label>
<label>기간별 이율 (%)<br><input type="number" id="rate" step="0.1" value="1"></label>
<label>총 기간 수<br><input type="number" id="periods" value="12"></label>
<label>기간 단위<br>
<select id="periodUnit">
<option value="일">일</option>
<option value="월" selected>월</option>
<option value="년">년</option>
</select>
</label>
<button onclick="calculate()">계산하기</button>
<div id="result"></div>
<script>
function calculate() {
const initial = parseFloat(document.getElementById('initial').value.replace(/,/g,''));(document.getElementById('initial').value);
const addVal = parseFloat(document.getElementById('addVal').value.replace(/,/g,''));(document.getElementById('addVal').value);
const rate = parseFloat(document.getElementById('rate').value) / 100;
const periods = parseInt(document.getElementById('periods').value);
let value = initial;
let rows = '';
const unit = document.getElementById('periodUnit').value;;
for (let p = 1; p <= periods; p++) {
value += addVal;
value *= (1 + rate);
rows += `<tr>
<td>${p} (${unit})</td>
<td>${addVal.toLocaleString()}</td>
<td>${rate}</td>
<td>${Number(value.toFixed(0)).toLocaleString().toLocaleString()}</td>
</tr>`;
}
document.getElementById('result').innerHTML = `
<h3>결과표</h3>
<table>
<tr>
<th>기간</th>
<th>추가금</th>
<th>이율</th>
<th>적용 후 금액</th>
</tr>
${rows}
</table>
<h3>그래프</h3>
<canvas id="chart" width="600" height="300"></canvas>
`;
// Chart
const ctx = document.getElementById('chart').getContext('2d');
const labels = Array.from({length: periods}, (_, i) => `${i+1} (${unit})`);
const values = [];
let tempVal = initial;
for(let p=1; p<=periods; p++){
tempVal += addVal;
tempVal *= (1 + rate);
values.push(Number(tempVal.toFixed(0)));
}
new Chart(ctx, {
type: 'line',
data: { labels: labels, datasets: [{ label: '자산 증가 추이', data: values }] },
options: { responsive: false }
});
}
function formatNumber(el){
let v = el.value.replace(/,/g,'');
if(!isNaN(v) && v !== ''){
el.value = Number(v).toLocaleString();
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>
'돈 버는 정보' 카테고리의 다른 글
| 환상적인 SUT 토큰 차트, DeCT 슈퍼세이브 (4) | 2025.03.17 |
|---|
댓글