Thuộc tính step của HTML DOM Input Time

Thuộc tính step của đối tượng Input Time xác định khoảng cách bước nhảy (granularity) cho giây khi người dùng dùng mũi tên lên/xuống hoặc gọi stepUp()/stepDown(). Giá trị phải là số chia hết cho 60 (10, 15, 20, 30, 60...).

Cú pháp

Lấy giá trị step

inputTimeObject.step

Thiết lập step

inputTimeObject.step = số_nguyên

Giá trị hợp lệ

Ví dụ minh họa

Ô time ban đầu step=2. Hai nút đổi step thành 20 và 30 giây:

<!DOCTYPE html>
<html>
<head>
<title>Input Time 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>Time-step</legend>
    <label for="TimeSelect">Giờ: </label> 
    <input type="time" id="TimeSelect" step="2"> 
    <input type="button" onclick="doiBuoc(20)" value="Step 20 giây"> 
    <input type="button" onclick="doiBuoc(30)" value="Step 30 giây"> 
    <div id="divDisplay"></div> 
  </fieldset> 
</form> 
<script> 
  var divDisplay = document.getElementById("divDisplay"); 
  var inputTime = document.getElementById("TimeSelect"); 
  divDisplay.textContent = 'Bước hiện tại: ' + inputTime.step; 
  function doiBuoc(myStep) { 
    inputTime.step = myStep; 
    divDisplay.textContent = 'Bước hiện tại: ' + inputTime.step; 
  } 
</script> 
</body> 
</html>

Kết quả

• Ban đầu: step=2 (giây).
• Nhấn Step 20 giây: step=20, mũi tên lên/xuống nhảy 20 giây/lần.
• Nhấn Step 30 giây: step=30, nhảy 30 giây/lần.

Mẹo: step="60" sẽ nhảy từng phút (phổ biến cho UI chọn giờ làm việc). step="1" cho phép chọn chính xác từng giây.