window.setInterval( func, delayTime )は、第２引数「delayTime」に指定した時間が経過する度に、第１引数「func」に指定した関数を繰り返し実行するメソッド。
構文
<script type="text/javascript">
window.setInterval( func, delayTime );
</script>
window.setInterval( func, delayTime );
</script>
<script>～</script>内であれば、window.は、下記のように省略可能。
<script type="text/javascript">
setInterval( func, delayTime );
</script>
setInterval( func, delayTime );
</script>
引数
- func
- 繰り返し実行する関数。
- delayTime
- 実行する間隔を、ミリ秒単位で指定。
戻り値
window.clearIntervalメソッドで識別に使うID。
サンプル
時間:
サンプルの動作について
- ページを読み込むと、「時間: 」の右横に、デジタル時計のように現在時刻を表示する。
- 「ストップ」ボタンをクリックすると、「時間: 」の右横の時計を停止する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
var $intervalID = window.setInterval(
function(){
sampleClock()
},
1000
);
function sampleClock() {
var $thisTime = new Date().toLocaleTimeString();
document.getElementById( "sampleOutput" ).innerHTML = $thisTime;
}
</script>
var $intervalID = window.setInterval(
function(){
sampleClock()
},
1000
);
function sampleClock() {
var $thisTime = new Date().toLocaleTimeString();
document.getElementById( "sampleOutput" ).innerHTML = $thisTime;
}
</script>
HTML
<div class="sample">
時間: <span id="sampleOutput"></span>
<br /><br />
<button onclick="window.clearInterval( $intervalID )">ストップ</button>
</div>
時間: <span id="sampleOutput"></span>
<br /><br />
<button onclick="window.clearInterval( $intervalID )">ストップ</button>
</div>
CSS
<style type="text/css">
.sample button {
font-size: 16px;
}
</style>
.sample button {
font-size: 16px;
}
</style>