시간 일, 시, 분, 초 계산기 스크립트

12/26/2022 12:30:00 오전
시간을 일, 시, 분, 초로 조회해 보는 계산기 스크립트입니다.
<!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>
댓글
