JavaScript
アイキャッチ 猫

こんにちは。今回はJavaScriptでカウントダウンタイマーを作成してみました!オリンピックやワールドカップ、お正月のタイマーとしても使えますね!
今回はシンプルなスタイルで作成していますが、派手なスタイルにしても面白いと思います。

HTML

今回のHTMLはとてもシンプルです。
現在時刻とカウントダウンタイマーのp要素をそれぞれ作成しています。

<body>
    <p id="now"></p>
    <p id="count_down"></p>
</body>

JavaScript

時間の表示については、JavaScriptを使用しています。
主に現在時刻の出力とカウントダウンの出力とそれぞれ実装しています。

// 曜日の配列を取得
var week_day = ["日", "月", "火", "水", "木", "金", "土"];

window.onload = function () {

    var id = setInterval(function(){
        // 現在日時を出力
        var now_date = new Date();
        var now_date_str = "今日の日付は" + get_nichiji(now_date) + "(" + week_day[now_date.getDay()] + ")です。" + "<br>" +
            "時刻は" + get_jikoku(now_date) + "です。";
        
        document.getElementById("now").innerHTML = now_date_str;
        
        // 年末までのカウントダウン
        var nen_matsu = new Date(now_date.getFullYear() + 1 + "/1/01");
        var count_down = nen_matsu.getTime() - now_date.getTime();
        
        // 日にちから計算していく
        var day = Math.floor(count_down / (1000 * 60 * 60 * 24));
        count_down -=  (day *(1000 * 60 * 60 * 24));
        var hour = Math.floor(count_down / (1000 * 60 * 60));
        count_down -= (hour *(1000 * 60 * 60));
        var minutes =  Math.floor(count_down / (1000 * 60));
        count_down -= (minutes * (1000 * 60));
        var second = Math.floor(count_down / 1000);
        
        var count_down_str = get_nichiji(nen_matsu) + "まで、あと" +
            day + "日" + hour + "時" + minutes + "分" + second + "秒" + "です。";
        document.getElementById("count_down").innerHTML = count_down_str;
    }, 1000);
};

// 月を正しい表示で出力
function get_month(date_obj) {
    return date_obj.getMonth() + 1;
}

// 〇〇年〇〇月〇〇日表示
function get_nichiji(date_obj) {
    return date_obj.getFullYear() + "年" + get_month(date_obj) + "月" + date_obj.getDate() + "日";
}

// 〇〇時〇〇分〇〇秒表示
function get_jikoku(date_obj) {
    return date_obj.getHours() + "時" + date_obj.getMinutes() + "分" + date_obj.getSeconds() + "秒";
}

// 曜日取得
function get_week_day(date_obj) {
    return week_day[date_obj.getDay()];
}

デモ

出力内容はこちらになります。
1秒ごとに現在時刻と翌年の1月1日までのカウントダウンの秒数が変化されています。

まとめ

今回はJavaScriptでカウントダウンタイマーを作成しました。
日付の表示方法やカウントするためのタイマー処理を主に使用しました。

今回は機能を主にご紹介しましたが、CSSでスタイルを設定して、おしゃれなカウントダウンタイマーを作ってみてはいかがでしょうか。

本記事作成に当たり、こちらの記事を参考にさせていただきました。
ありがとうございます。
JavaScriptでカウントダウンを作る

最近は特に業務でもJavaScriptを使うことが多いので、こちらの記事が多くなっていますが、プログラムについてのさまざまなジャンルをこれからも紹介していければと考えています。
良かったら他の記事もご覧になってください。