国名入力ゲーム(12/16)タイマー実装

javascriptで小数点を含むカウントダウンタイマーを作成する

前回はまでで、javascriptでの時間の扱い方と定期処理の方法を学びました。
今回はそれらを用いて実際のタイマー処理を作成します。

前回定期処理を学んだ際に以下のようなプログラムを書きましたが、
覚えているでしょうか。

i = 10     //カウント用変数

//定期処理停止用関数
function cL(name){
	clearInterval(name);
}

//繰り返し処理の名前付け
//停止条件を書いて、条件を満たす場合に
//cL関数で定期処理停止関数を実行する。
var hensu = function (){
  console.log(i--);
  if(i<0){
    cL(jikkou)
  }
}

//繰り返し実行の開始
var jikkou = setInterval( hensu, 1000);

i = 10 //カウント用変数

//定期処理停止用関数

function cL(name){

clearInterval(name);

}

//繰り返し処理の名前付け

//停止条件を書いて、条件を満たす場合に

//cL関数で定期処理停止関数を実行する。

var hensu = function (){

console.log(i--);

if(i<0){

cL(jikkou)

}

//繰り返し実行の開始

var jikkou = setInterval( hensu, 1000);

大まかに流れを説明すると次のようにプログラムが動きます。

変数iに10を代入
setIntervalで1秒毎に関数hensuが呼び出される
関数hensuが繰り返されるたびにiの値が1ずつ減っていて
iが0より小さくなった場合に繰り返し処理が停止する

このプログラムが理解できていることが重要です。

今回作成するタイマー処理は次のコードです。

//========================
//カウントダウンタイマー用変数
//========================
var limitTime = 10;         //タイマー時間
var startTime = Date.now(); //現在時刻
var timeDiff; //差分用       //時間差分
var score = 0;

//==================
// カウントダウン関数
//==================
var countdown = function () {
    timeDiff = Date.now() - startTime;
    timeDiff = limitTime - (timeDiff / 1000);
    timeDiff *= 100;
    timeDiff = Math.floor(timeDiff);
    timeDiff = timeDiff / 100;
    //console.log(timeDiff/100);
    //document.getElementById("timer").innerText = timeDiff/100+" sec";
    $('.sec').text(timeDiff);
}

//==================
// インターバル処理
//==================
var id = setInterval(function () {
    countdown();
    if (timeDiff <= 0) {
        clearInterval(id);
        //document.getElementById("timer").innerText = "終了";
        $('#timer').text("終了");

        //フォームを消す
        $("#inputAnswer").hide();

    }
}, 1);

//========================

//カウントダウンタイマー用変数

//========================

var limitTime = 10; //タイマー時間

var startTime = Date.now(); //現在時刻

var timeDiff; //差分用 //時間差分

var score = 0;

//==================

// カウントダウン関数

//==================

var countdown = function () {

timeDiff = Date.now() - startTime;

timeDiff = limitTime - (timeDiff / 1000);

timeDiff *= 100;

timeDiff = Math.floor(timeDiff);

timeDiff = timeDiff / 100;

//console.log(timeDiff/100);

//document.getElementById("timer").innerText = timeDiff/100+" sec";

$('.sec').text(timeDiff);

}

//==================

// インターバル処理

//==================

var id = setInterval(function () {

countdown();

if (timeDiff <= 0) {

clearInterval(id);

//document.getElementById("timer").innerText = "終了";

$('#timer').text("終了");

//フォームを消す

$("#inputAnswer").hide();

}

}, 1);

コードの内容から説明します。

1.カウントダウンタイマー用変数
カウンドダウンを実装するにあたり、最初の秒数を変数limitTimeを設定しています。
変数startTimeにDate.now()で1970年1月1日午前0時0分0秒からの経過時間をミリセック(1/1000秒）単位で
取得します。
経過時間の差分を格納する変数をtimeDiffとします。

2.次にカウントダウン関数の部分の説明です。

①.timeDiff変数に現在までの経過時間とカウントダウン開始時刻の差分時間(ミリセック）格納。
②制限時間を格納したlimitTime（単位秒）と①で差分として取得したミリセックを1000で割って秒に変換
して差分をtimeDiffに格納（ここで単位は秒になる）これが残り時間となる。
③少数点第2まで表示したいため、小数点第3以下の数字消すために、一旦timeDiffに100をかける
④③の結果timeDiffの小数点以下の数字は本来小数点第3以下の値のため、不要。
よって、timeDiffをMath.floor関数で少数点以下を切り捨てる。
⑤timeDiff小数点第３以下を捨てたので、3で100を掛けた分を戻すため100で割る
⑥timeDiffの値を.secの要素に書き込む

メインの処理は①から②の処理です。現在時刻までに経過時間Data.now()から開始時刻startTime
を引き算することで、何秒経過したか得ることができます。
③と④については若干複雑に見えるかもしれませんが、行いたいことは単純で、少数点第2まで求めたいため
一旦100掛けて、小数点以下を切り捨てして、100で割って少数点を戻すということですね。
少し面倒な処理ですが、数値が高速で切り替わるのは入力を急かす演出になるので、
どんどん利用していきましょう。

⑤行目の処理で、テキストを要素に書き込む場合
jQueryを利用するので、HTMLのheadにjQueryを読み込んでおいてください。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="main.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>国名当てゲーム</title>
</head>

<head>

<title>国名当てゲーム</title>

</head>

最後にインターバルの処理です。
流れは単純です。
①setIntervalでカウントダウン関数を呼び出します。
②カウントダウン関数終了後、経過時間が0より小さくなった場合は
繰り返し処理を中断して回答入力欄を消す。
それ以外はカウントダウン関数を繰り返し続けます！入力が完了したら、実際にページを確認してましょう。
固定でsecの部分がカウントダウンしていればOKです。

・Date.now()で1970年1月1日午前0時0分0秒から現在までの経過時間をミリセック(1/1000秒)単位で
取得することができる。
・ミリセックに1000をかけることで秒を得ることができる。
・国名当てゲームでは小数点第2までの秒数を得るために、100を掛けて残りを切り捨てて
100で割る。

次回は出題処理の作成です。