HTML DOMのInput Time stepUp()メソッドとは？使い方とサンプルコードを解説
HTML DOMのInput Time stepUp()メソッドは、時刻入力フィールド（<input type="time">）の値を、指定した分数だけ増加させるためのメソッドです。例えば「10」を引数として渡せば、現在の時刻から10分進めた値に更新されます。
構文
stepUp()メソッドの基本的な構文は以下の通りです。引数には増加させたい分数を数値で指定します。引数を省略した場合のデフォルト値は「1」です。
inputTimeObject.stepUp(number)
パラメータ
- number（省略可）：時刻フィールドを増加させる分数。デフォルトは1。
サンプルコード
ここでは、Input Time stepUp()メソッドを使った具体的な例を見てみましょう。ボタンをクリックすると、時刻フィールドの値がそれぞれ10分・25分ずつ増加します。
<!DOCTYPE html>
<html>
<head>
<title>Input Time stepUp()</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-stepUp( )</legend>
<label for="TimeSelect">時計 :
<input type="time" id="TimeSelect" value="12:52">
</label>
<input type="button" onclick="changeStep(10)" value="10分増やす">
<input type="button" onclick="changeStep(25)" value="25分増やす">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
function changeStep(myStepUp) {
inputTime.stepUp(myStepUp);
divDisplay.textContent = '現在のステップ: '+myStepUp;
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、次のような動作になります。
ボタンをクリックする前 − 時刻フィールドには初期値「12:52」が表示されます。
「10分増やす」ボタンをクリックした後 − 時刻が「13:02」に更新されます。
「25分増やす」ボタンをクリックした後 − 時刻がさらに25分進み、「13:27」に更新されます。
ポイントまとめ
- stepUp()メソッドは、時刻フィールドの値を分単位で増加させます。
- 逆に値を減少させたい場合は、stepDown()メソッドを使用します。
- 引数を省略すると、1分ずつ値が増加します。
- 主要なモダンブラウザ（Chrome、Firefox、Edge、Safariなど）でサポートされています。
-
HTML DOM console.time()メソッドの使い方を徹底解説！コードの実行時間を計測する方法
HTML DOM の console.time() メソッドは、特定のコードを実行するのにかかった経過時間を表示するためのメソッドです。これにより、コード全体または特定の部分のパフォーマンスを分析することができます。コードの実行時間を計測することで、より効率的なプログラムを作成できるようになります。 また、オプションのラベル（label）パラメータを使用することで、同じページ上に複数のタイマーを作成し、それぞれ個別に計測することも可能です。 構文（シンタックス） HTML DOM console.time() メソッドの構文は以下のとおりです。 console.time(label) ここで指
-
【HTML DOM】Input RangeのstepUp()メソッドの使い方を解説
HTML DOMのInput Range（type=range）で利用できるstepUp()メソッドは、スライダーコントロールの現在値を指定した数だけ増加させるためのメソッドです。引数を省略した場合は1ずつ増加します。また、input要素にstep属性が指定されている場合は、そのstep値の倍数単位で値が増加します。たとえばstep=20が設定されている場合、stepUp(2)を実行すると20×2＝40だけ値が増加します。 構文 RangeオブジェクトのstepUp()メソッドの構文は以下のとおりです。 rangeObject.stepUp(number) numberは、スライダーの値をどれ