<JavaScript>来場者カウンター作ってみたPart.3

ようやく書ける
//今まで書いてなかっただけ
ということでこれの第三段です
poolbooyer.hatenablog.jp
poolbooyer.hatenablog.jp

ということでまずは目次から確認

  • 制作物の目的(前々回)
  • 制作物の概要(前々回)
  • 制作物の完成形(前々回)
  • 制作したコード(html)(前々回)
  • 制作したコード(JavaScript)
    • 機能1:人数カウント機能(前回)
    • 機能2:トータル人数算出機能(前回)
    • 機能3:時間ごと人数統計表示機能(今回)

ということで本編レッツゴー

時間ごと人数統計表示機能

機能の概要

  • 1時間に一度来場者を集計
  • 集計結果を表示
  • 表示数を抑制(2つまで)

機能のために利用したもの

今回はbootstrapのcardコンポーネントを利用しました
くわしくは以下参照です
getbootstrap.com
これだとサンプルでは画像を使ってるんですが今回は画像なしで単体の要素をまとめて表示したいっていう意図もありこれを画像なしで使用しました。

実際のソースコード

var cardmaker = function (card_id) {
    //時間情報を取得
    DD = new Date();
    Hours = DD.getHours();
    Minutes = DD.getMinutes();
    //毎時00分のときに処理を実行
    if (Minutes == 0) {
        //カードを作る場所を指定
        var card = document.createElement("div");
        //その時点でのトータルの値を取得
        var total_p = document.getElementById('parent_total').innerHTML;
        var total_s = document.getElementById('student_total').innerHTML;
        //カード表示を行うために必要な要素を生成
        var card_head = "<div class=\"card\" id=\"" + card_id + "\"><div class=\"card-body\"><h3 class=\"card-title\">";
        //作る場所に指定
        var parent_object = document.getElementById("card");
        var cards = document.getElementsByClassName("card");
        //過去にカードを生成したときのカード情報生成
        if (card_id > 0) {
            var ob = parent_object.getElementsByClassName("num");
            var length = ob.length;
            //pane属性に保存されている前回の集計値を取得
            var num_p = ob[length - 2].getAttribute("pane");
            var num_s = ob[length - 1].getAttribute("pane");
            //totalの増分の取得
            var p_add = total_p - num_p;
            var s_add = total_s - num_s;
            card_id = card_id + 1;
            card_head = card_head + Hours;
            card_head = card_head + "時</h3>";
            var card_body = "<ul class=\"card-text\">";
            //pane属性と表示する情報に集計値を書き込む
            //前回の集計値との差を書き込む
            var p_data = "<li class=\"num\" pane=\"" + total_p + "\">中学生以外:  " + total_p + "(前回比 " + p_add + ")</li>";
            var s_data = "<li class=\"num\"pane=\"" + total_s + "\" pane=\"" + total_p + "\">中学生:  " + total_s + "(前回比 " + s_add + ")</li>";
            card_body = card_body + p_data + s_data + "</li></ul></div>";
            card.innerHTML = card_head + card_body;
            //1つ目のカードを生成
        } else {
            card_id = card_id + 1;
            //時刻情報を作る
            card_head = card_head + Hours;
            card_head = card_head + "時</h3>";

            //集計情報を生成
            var card_body = "<ul class=\"card-text\">";
            //pane属性と表示する情報に集計値を書き込む
            var p_data = "<li class=\"num\" pane=\"" + total_p + "\">中学生以外:  " + total_p + "</li>";
            var s_data = "<li class=\"num\"pane=\"" + total_s + "\" pane=\"" + total_p + "\">中学生:  " + total_s + "</li>";
            card_body = card_body + p_data + s_data + "</li></ul></div>";
            //カードを表示
            card.innerHTML = card_head + card_body;
        }
        parent_object.appendChild(card);
        //1分後に関数を再度呼び出す
        setTimeout(function () {
            cardmaker(card_id);
        }, 60000);
        //カードの数が2つを超えたときに一番古いものを非表示する
        if (card_id > 2) {
            cards[card_id - 3].setAttribute("style", "display:none");
        }
    //時間が00分でないとき1分後に再度実行する
    }else {
        //cardmaker関数を1分後に呼び出す
        setTimeout(function () {
            cardmaker(card_id);
        }, 60000);
    }
    return card_id;
}

ということでこれまで2回で公開した公開したソースコードとこれを組み合わせることで以下のリンクのように使うことができます。
counter

今回は使いたい機能に組み上げることが目的だったのでもっといい感じに書きたかったのですがとりあえずこれにてこのシリーズは終了