HTML DOM Input Time stepDown()メソッドの使い方とサンプルコード
HTML DOMのstepDown()メソッドは、時刻入力フィールド（<input type="time">）の値を、指定した分数だけ減少させるためのメソッドです。このメソッドを使うことで、JavaScriptから簡単に時刻フィールドの値を操作できます。
構文
stepDown()メソッドの基本構文は以下の通りです。
inputTimeObject.stepDown(number)
引数numberには、減少させたい分数を指定します。引数を省略した場合は、デフォルト値として1が適用されます。
サンプルコード
ここでは、ボタンをクリックすると時刻が指定した分数だけ減るデモを紹介します。
<!DOCTYPE html>
<html>
<head>
<title>Input Time 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>Time-stepDown( )</legend>
<label for="TimeSelect">Clock :
<input type="time" id="TimeSelect" value="12:20">
</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 inputTime = document.getElementById("TimeSelect");
function changeStep(myStepDown) {
inputTime.stepDown(myStepDown);
divDisplay.textContent = 'Current Step: '+myStepDown;
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、以下のように動作します。
ボタンをクリックする前は、初期値「12:20」が表示されています。
「Decrease by 10」ボタンをクリックすると、時刻が10分減少します。
「Decrease by 25」ボタンをクリックすると、時刻が25分減少します。
補足：関連メソッド
stepDown()メソッドと対になるものとして、時刻フィールドの値を増加させるstepUp()メソッドがあります。両者を組み合わせることで、時刻の増減を柔軟に制御できます。なお、これらのメソッドはChrome、Firefox、Edge、Safari、Operaなど主要なブラウザでサポートされています。
-
HTML DOM console.time()メソッドの使い方を徹底解説！コードの実行時間を計測する方法
HTML DOM の console.time() メソッドは、特定のコードを実行するのにかかった経過時間を表示するためのメソッドです。これにより、コード全体または特定の部分のパフォーマンスを分析することができます。コードの実行時間を計測することで、より効率的なプログラムを作成できるようになります。 また、オプションのラベル（label）パラメータを使用することで、同じページ上に複数のタイマーを作成し、それぞれ個別に計測することも可能です。 構文（シンタックス） HTML DOM console.time() メソッドの構文は以下のとおりです。 console.time(label) ここで指
-
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