본문 바로가기
카테고리 없음

기본적인 복리 계산기 JAVA 스크립트 예시

알쓸모IT 2023. 2. 14.
반응형

블로그에 복리 계산기를 실행하고 싶어서 찾아본 복리계산기 예시

 

<!DOCTYPE html>
<html>
  <head>
    <title>복리 계산기</title>
    <style>
      /* 스타일을 설정합니다. */
      label {
        display: block;
        margin-bottom: 5px;
      }
      input {
        width: 100%;
        margin-bottom: 10px;
      }
      button {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>복리 계산기</h1>
    <form>
      <label>초기 투자금액</label>
      <input type="number" id="initialAmount" />
      <label>연이율(%)</label>
      <input type="number" id="interestRate" />
      <label>투자 기간(년)</label>
      <input type="number" id="investmentPeriod" />
      <button type="button" onclick="calculate()">계산하기</button>
    </form>
    <h2 id="result"></h2>
    <script>
      // 계산을 수행하는 함수를 정의합니다.
      function calculate() {
        var initialAmount = Number(document.getElementById("initialAmount").value);
        var interestRate = Number(document.getElementById("interestRate").value) / 100;
        var investmentPeriod = Number(document.getElementById("investmentPeriod").value);
        var result = initialAmount * Math.pow(1 + interestRate, investmentPeriod);
        document.getElementById("result").innerText = "최종 금액: " + result.toFixed(2) + "원";
      }
    </script>
  </body>
</html>

 

위의 코드를 복사해서 HTML 파일에 붙여 넣고 저장한다음, 브라우저에서 열면 복리 계산기가 동작한다. 

 

 

복리 계산기

복리 계산기

 

 

 

코드를 바탕으로 디자인을 변경하거나 추가 할 수 있다.

 

반응형
저작자표시 비영리 변경금지

티스토리툴바