HTML DOM의 Input DatetimeLocal step 속성은 datetime-local 타입 입력 필드에서 초(second) 또는 밀리초(millisecond) 단위로 허용되는 유효한 간격을 결정합니다. 이 속성을 활용하면 사용자가 선택할 수 있는 시간 값의 세밀한 조절이 가능해집니다.
문법(Syntax)
step 속성의 기본 문법은 다음과 같습니다.
- 현재 값 반환하기
inputDatetimeLocalObject.step
- step 속성에 숫자 값 설정하기
inputDatetimeLocalObject.step = number
매개변수(Parameters)
number 매개변수에 지정할 수 있는 값의 종류는 다음과 같습니다.
| 값 | 설명 |
|---|---|
| seconds (초) | 60을 정확히 나누어 떨어지게 하는 숫자만 유효합니다 (예: 10, 15, 20) |
| milliseconds (밀리초) | "."으로 시작하며 1000을 정확히 나누어 떨어지게 하는 숫자만 유효합니다 (예: .10, .20, .01) |
예제(Example)
다음은 Input DatetimeLocal step 속성을 활용한 실전 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal step</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Datetime-Local-step</legend>
<label for="datetimeLocalSelect">Local Date Time :
<input type="datetime-local" id="datetimeLocalSelect" step="2">
</label>
<input type="button" onclick="changeStep('10')" value="Step Seconds to 10">
<input type="button" onclick="changeStep('.10')" value="Step milliseconds to .10">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
function changeStep(myStep) {
inputDatetimeLocal.step = myStep;
if(inputDatetimeLocal.step.indexOf('.') === -1)
divDisplay.textContent = 'Seconds step: '+inputDatetimeLocal.step;
else
divDisplay.textContent = 'Milli-seconds step: '+inputDatetimeLocal.step;
}
</script>
</body>
</html>
동작 원리
이 예제에서는 버튼을 클릭하면 changeStep() 함수가 호출되어 datetime-local 입력 요소의 step 값을 동적으로 변경합니다. 설정된 값에 소수점(".")이 포함되어 있으면 밀리초 단위 간격으로 판단하고, 그렇지 않으면 초 단위 간격으로 판단하여 그 결과를 화면에 출력합니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
"Step Seconds to 10" 버튼 클릭 시:
"Step milliseconds to .10" 버튼 클릭 시:
