javascriptでタイマーを作成

2021年12月31日2021年12月31日 Bluebear-IO 328 Views 0 Comments Timer, タイマー

javascriptでタイマーを作成する方法はwindow.setIntervalを使用する

HTML

<body onload="firstscript();">
<div id="load_phrase" class="button" onclick="stopscript()">タイマー開始</div>

Javascript

var timerCount = 5;//5秒
var id;
function firstscript(){
 id = window.setInterval(now, 1000); //1秒ごとにnow関数を実行
}
function now(){
 timerCount = timerCount-1;
 $(`#load_phrase`).text( timerCount );
 if(timerCount==0){
  stopscript();
 }
}
function stopscript(){
 $(`#load_phrase`).text( "タイマー停止" );
 window.clearInterval(id);
}
</script>

上記コードではHTMLが読み込まれるとfirstscript内のwindow.setIntervalが実行され、1秒につどnow関数が実行される

秒数が5秒経過した場合はタイマーを停止するようになっている。