HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Timeのstepプロパティの使い方を解説

HTML DOMのInput Time stepプロパティは、時刻入力フィールド（<input type="time">）における「秒」の有効な間隔（ステップ値）を設定・取得するためのプロパティです。このプロパティを利用することで、ユーザーが選択できる秒の値を一定の間隔に制限できます。

構文

stepプロパティの構文は以下のとおりです。

値を取得する場合

inputTimeObject.step

値を設定する場合

inputTimeObject.step = number

パラメータ

設定できるnumber値の条件は以下のとおりです。

seconds（秒）60を割り切れる数値である必要があります（例：10、15、20など）

サンプルコード

ここでは、Input Timeのstepプロパティの具体的な使用例を見ていきましょう。

<!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">Time: </label>
<input type="time" id="TimeSelect" step="2">
<input type="button" onclick="changeStep(20)" value="Step to 20">
<input type="button" onclick="changeStep(30)" value="Step to 30">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputTime = document.getElementById("TimeSelect");
    divDisplay.textContent = 'The current step is: '+inputTime.step;
    function changeStep(myStep) {
        inputTime.step = myStep;
        divDisplay.textContent = 'The current step is: '+inputTime.step;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような出力が得られます。

初期状態では、step属性に「2」が設定されているため、現在のステップ値として「2」が表示されます。

「Step to 20」ボタンをクリックした場合：

HTML DOM Input Timeのstepプロパティの使い方を解説

ボタンをクリックすると、JavaScriptのchangeStep関数が呼び出され、stepプロパティに20が設定されます。画面には「The current step is: 20」と表示されます。

「Step to 30」ボタンをクリックした場合：

HTML DOM Input Timeのstepプロパティの使い方を解説

同様に、このボタンをクリックするとstepプロパティが30に変更され、「The current step is: 30」と表示されます。

このように、stepプロパティを活用すれば、JavaScriptから動的に秒の入力間隔を変更でき、フォームの入力制御を柔軟に行うことができます。

  1. HTML DOM 入力範囲（Range）の step プロパティとは？使い方を解説

    HTML DOM の Input Range step プロパティは、スライダーコントロール（<input type=range>）の step 属性値を設定または取得するために使用されるプロパティです。step プロパティでは、スライダーが 1 回の操作でどれだけ移動するかを指定します。さらに、max 属性と min 属性を step プロパティと組み合わせて使うことで、有効な値の範囲を柔軟に定義することができます。構文step プロパティを設定する場合rangeObject.step = numberここで指定する number は、スライダーコントロールの 1 回あたりの移動

  2. HTML DOM の Time 要素 dateTime プロパティとは？取得・設定方法を実例付きで解説

    HTML DOM の Time オブジェクトが持つ dateTime プロパティは、HTML の <time> 要素に設定された datetime 属性の値を取得（読み取り）したり、新しい値を設定（書き込み）したりするために使用されます。 datetime 属性は画面上には表示されず、機械が判読できる形式（ISO 8601 形式）で日時を記録します。これにより、検索エンジンやカレンダーアプリなどがページ内の日付・時刻情報を正確に解釈できるようになります。 dateTime プロパティの構文 1. 値を取得する場合（文字列として返す） timeObject.dateTime