시간을 일, 시, 분, 초로 조회해 보는 계산기 스크립트입니다.
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>