スポンサーリンク

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

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

【高コスパ!】Windows11対応ノートパソコンを目的別にご紹介♪

みみねこ
みみねこ
値段が安くても、安かろう悪かろうでは意味がない!
ローコスト&快適に使えるスペックで、本当にお値段以上のノートパソコンを紹介します♪

ネット検索や動画視聴などのライトユーザーから、学業やビジネスで持ち運び目的のユーザーに最適!

IdeaPad Slim 550 14型 (AMD)

14.0型/最新世代Ryzen 5/メモリ 8GB/SSD 256GB/Webカメラなので、
持ち運び用として学業やビジネスにも十分使えます!

・学業、ビジネスに最適!

IdeaPad Flex 550 15.6型 (AMD Ryzen™ 5000シリーズ)

15.6型/最新世代Ryzen 5/メモリ 8GB/SSD 256GB/Webカメラ/2 in 1タッチパッド・タッチペン付なので、学業やビジネスに!

・動画編集やネットゲームに最適!

Legion 560(15)

15.6型/最新世代Ryzen 7/メモリ 16GB/SSD 1TB/GeForce GTX1650/Webカメラなので、
3Dゲームや動画編集に!

最近は、Lenovo製品が最もコスパが良い印象なので、Lenovo製品中心に紹介しています。
コスパが高いだけではなく、故障しやすかったり、タイピングしにくかったりとチープな要素が少ない等、他社類似メーカーと比べても優れています。
ただ、実際に購入される際は、海外メーカー特有ではありますが納期が遅い商品も多く、納品日にはご注意されてくださいね。

JavaScriptプログラミング
スポンサーリンク
nyanblog ~にゃんぶろぐ~
タイトルとURLをコピーしました