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

HTML DOM Input DatetimeLocal stepDown()メソッドとは？構文と使い方を解説

HTML DOM Input DatetimeLocal stepDown()メソッドとは

HTML DOM の Input DatetimeLocal stepDown() メソッドは、datetime-local 型の入力フィールドに表示されている日時の値を、指定した分数だけ減少させるためのメソッドです。引数を省略した場合、値はデフォルトで 1 分ずつ減少します。

構文

stepDown メソッドの基本的な構文は以下のとおりです。数値を引数として渡して呼び出します。

inputDatetimeLocalObject.stepDown(number)

パラメータ

  • number（省略可）：datetime-local フィールドの値を減少させる分数を指定します。デフォルト値は 1 です。

サンプルコード

ここでは、Input DatetimeLocal stepDown() メソッドの具体的な使用例を紹介します。ボタンをクリックすると、日時フィールドの値が指定した分数だけ減少し、その結果が画面に表示されます。

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal stepDown()</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-stepDown( )</legend>
<label for="datetimeLocalSelect">Local Date Time :
<input type="datetime-local" id="datetimeLocalSelect" value="2010-12-21T23:50">
</label>
<input type="button" onclick="changeStep(10)" value="Decrease by 10">
<input type="button" onclick="changeStep(25)" value="Decrease by 25">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
   function changeStep(myStepDown) {
      inputDatetimeLocal.stepDown(myStepDown);
      divDisplay.textContent = 'Current Step: '+myStepDown;
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような画面が表示されます。

ボタンをクリックする前：

HTML DOM Input DatetimeLocal stepDown()メソッドとは？構文と使い方を解説

「Decrease by 10」ボタンをクリックした後：

HTML DOM Input DatetimeLocal stepDown()メソッドとは？構文と使い方を解説

「Decrease by 25」ボタンをクリックした後：

HTML DOM Input DatetimeLocal stepDown()メソッドとは？構文と使い方を解説

補足

逆に日時の値を増加させたい場合は、stepUp() メソッドを使用します。また、stepDown() メソッドは Chrome、Firefox、Edge、Safari など主要なブラウザでサポートされているため、幅広い環境で利用できます。

  1. HTML DOM Input Week stepUp()メソッドの使い方をわかりやすく解説

    HTML DOM の Input Week stepUp() メソッドは、<input type=week> で作成された週フィールドの値を、指定した週数だけ増加させるためのメソッドです。JavaScript から呼び出すことで、ユーザー操作なしに週の値を動的に進めることができます。stepUp() メソッドの構文stepUp() メソッドの基本的な構文は以下のとおりです。inputWeekObject.stepUp(number)引数 number には、増加させたい週数を数値で指定します。この引数は省略可能で、省略した場合のデフォルト値は 1 になります。つまり、引数なしで呼び

  2. HTML DOM 入力レンジ（Range）のstepDown()メソッド徹底解説

    HTML DOM Input Range stepDown()メソッドとはHTML DOMのInput Range stepDown()メソッドは、スライダー（レンジ入力）コントロールの値を指定した数だけ減少させるために使用します。引数を省略した場合は1ずつ減少します。さらに、step属性が指定されている場合は、そのステップ値の倍数単位で値が減っていきます。例えば、step=20が設定されている状態でstepDown(2)を実行すると、20×2＝40ずつ値が減少します。構文RangeオブジェクトのstepDown()メソッドの構文は以下の通りです。rangeObject.stepDown(nu