시간 초 계산기 스크립트 (html, css, javascript)

시간 초 계산기 스크립트

시간 초 계산기 스크립트 예제코드입니다. 해당 코드를 사용하여 게시한 글도 있으니, 궁금하시면 검색해 주세요~😘
<div class="cvtBeomSang">
  <label>일, 시, 분, 초 입력 : </label>
  <input type="number" id="inputBeomSang" value="1">
  <select id="timeUnitBeomSang">
   <option value="days" selected="">일(days)</option>
   <option value="hours">시간(hours)</option>
   <option value="minutes">분(minutes)</option>
   <option value="seconds">초(seconds)</option>
  </select>
  <button onclick="convertDays()" class="btnBeomSang">계산하기</button>
 </div>
<div class="resultBeomSang">
  <div id="daysResultBeomSang"></div>
  <br>
  <div id="hoursResultBeomSang"></div>
  <div id="minutesResultBeomSang"></div>
  <div id="secondsResultBeomSang"></div>
 </div>
<script>
  function convertDays() {
   const input = parseInt(document.getElementById("inputBeomSang").value);
   const timeUnit = document.getElementById("timeUnitBeomSang").value;
   let days = input * 24 * 60 * 60;
   let hours = input * 60;
   let minutes = input * 60 * 60;
   let seconds = input * 24 * 60 * 60;
   switch (timeUnit) {
    case "days":
     days = input;
     hours = input * 24;
     minutes = input * 24 * 60;
     seconds = input * 24 * 60 * 60;
     break;
    case "hours":
     days = input / 24;
     hours = input;
     minutes = input * 60;
     seconds = input * 60 * 60;
     break;
    case "minutes":
     days = input / 60 / 24;
     hours = input / 60;
     minutes = input;
     seconds = input * 60;
     break;
    case "seconds":
     days = input / 60 / 60 / 24;
     hours = input / 60 / 60;
     minutes = input / 60;
     seconds = input;
     break;
   }
   document.getElementById("daysResultBeomSang").innerHTML = `${days.toFixed(2).toString().replace(/\.00$/, '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")} 일`;
   document.getElementById("hoursResultBeomSang").innerHTML = `${hours.toFixed(2).toString().replace(/\.00$/, '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")} 시간`;
   document.getElementById("minutesResultBeomSang").innerHTML = `${minutes.toFixed(2).toString().replace(/\.00$/, '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")} 분`;
   document.getElementById("secondsResultBeomSang").innerHTML = `${seconds.toFixed(2).toString().replace(/\.00$/, '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")} 초`;
  }
 </script>
<style>
  .btnBeomSang {
   background-color: #4CAF50;
   border: none;
   color: white;
   padding: 10px 24px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   cursor: pointer;
   border-radius: 10px;
  }

  .cvtBeomSang {
   margin-bottom: 10px;
   display: flex;
   align-items: center;
  }

  #timeUnitBeomSang {
   margin-left: 10px;
   border-radius: 5px;
   padding: 5px;
  }

  .resultBeomSang {
   font-size: 36px;
   margin-top: 10px;
   display: flex;
  }

  .resultBeomSang div {
   padding: 10px;
   background-color: #f2f2f2;
   border-radius: 10px;
   margin-right: 30px;
  }

  .resultBeomSang div:last-child {
   margin-right: 0;
  }
 </style>