【JavaScript】カウントダウンタイマーの作り方【サンプル】

スポンサーリンク
アイキャッチ 猫JavaScript
スポンサーリンク

こんにちは。今回はJavaScriptでカウントダウンタイマーを作成してみました!

オリンピックやワールドカップ、クリスマスやお正月など季節の行事事のタイマーとしても使えます!

今回はシンプルなスタイルで作成していますが、CSSで派手なスタイルにしても面白いと思います♪

カウントを取る動きとして似ているアナログ時計を作った記事
良かったら見ていただけると嬉しいです!

スポンサーリンク

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でスタイルを設定して
おしゃれなカウントダウンタイマーを作ってみてはいかがでしょうか。

アナログ時計を作った記事も良かったら見てください!

本ブログで一押しのオンラインスクールのご紹介♪




本ブログで一押しのオンラインスクール「Udemy」
筆者も利用しているスクールで、日頃の隙間時間に好きな講座が学べるので大活躍です♪

ジャンルが豊富で学びたい講座がきっとみつかる

AI・データサイエンスなど最先端のIT技術からプレゼンなどビジネススキルに関する講座まで15.5万以上(※海外講座含む)あるため、自分が学びたい講座をみつけることができます

お手頃な価格帯

1講座あたり数千~数万円程度で実践的なスキルアップが可能です。
講座は一度購入すれば視聴期限なく受講でき、30日返金保証もついているので安心して始めることができます。

学びやすい多彩な機能

0.5~2倍の変速機能で自分のペースで受講が可能、専用アプリを使えばスマホからオフライン環境でも視聴が可能です!
また、講師に直接掲示板から質問ができるので疑問を解決し自学自習をサポートしてくれます。

購入前に視聴できますので、是非興味のある方は↓をクリックしてみてください。




JavaScriptプログラミング
スポンサーリンク
nyanblog
タイトルとURLをコピーしました