setInterval アーカイブ - nyanblog ~にゃんぶろぐ~

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

nyan2222 — Fri, 13 Aug 2021 05:01:54 +0000

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

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

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

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

先日はJavaScriptでカウントダウンタイマーを作成してみました。今回は前回の記事の内容を利用してアナログ時計を作ってみようともいます。サンプルもありますのでコピペで簡単にできます！初心者の方や勉強されている方におすすめなので、良かったら試してみてください♪

HTML
JavaScript
デモ
まとめ

HTML

今回のHTMLはとてもシンプルです。

現在時刻とカウントダウンタイマーのp要素をそれぞれ作成しています。

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()] + "）です。" + "
" +
            "時刻は" + 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】カウントダウンタイマーの作り方【サンプル】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【JQuery】遅延実行でイベントを発生させる方法

nyan2222 — Thu, 02 Jul 2020 09:00:00 +0000

こんにちは。今回は一定時間後に処理を実行することができる、遅延実行についてご紹介します。

setTimeout・clearTimeout関数
setInterval・clearInterval関数
setTimeoutとsetIntervalの違い
まとめ

setTimeout・clearTimeout関数

setTimeout関数は一定時間後に処理を実行する時に使用する関数です。
JavaScriptでは、基本的に同期（上から順番に）処理していきますが、明示的に時間をずらして実行したい場合、この関数を利用します。

こちらの例を見てみましょう。
このスクリプトを実行すると、1秒後にコンソール画面に「実行するよ」と表示されます。

setTimeout(function () {
    console.log("実行するよ");
}, 1000);

また、このようにすると繰り返し処理を実行することもできます。

var cnt = 0;
var countUp = function () {
    cnt++;
    console.log(cnt);
    var timeout = setTimeout(countUp, 1000);
}
countUp();

繰り返しsetTimeout関数を使用すると、無限処理になってしまうので、それを止めるためにclearTimeout関数を使用します。

clearTimeout関数は、setTimeout関数で宣言した処理を解除するための関数です。

var cnt = 0;
var countUp = function () {
    cnt++;
    console.log(cnt);
    var timeout = setTimeout(countUp, 1000);

    if (cnt > 4) {
        clearTimeout(timeout);
    }
}
countUp();

このようにclearTimeout関数を使用することで、指定の条件で繰り返し処理を終了することができます。

setInterval・clearInterval関数

先ほど、setTimeout関数で繰り返しの遅延実行を行いましたが似たような関数でsetInterval関数があります。

setInterval関数は、一定時間ごとに処理を実行することができます。

一方、clearInterval関数はsetInterval関数で宣言した処理を解除する関数です。
こちらが使用例になります。
カウントが5になるまで実行し、超えると処理を止めるようにしています。

var cnt = 0;
var countUp = function () {
    cnt++;
    console.log(cnt);
}
var interval = setInterval(function () {
    countUp();
    if (cnt > 4) {
        clearInterval(interval);
    }
}, 1000);

setTimeoutとsetIntervalの違い

ぱっと見では、setTimeout関数とsetInterval関数の違いはなさそうですが、時間間隔に少し違いがあります。

・setTimeout関数：処理終了時点から次に実行するタイミングを指定

・setInterval関数：処理開始時点から何秒間隔で実行するかを指定

そのため、setInterval関数では、間隔の秒数を超過した処理が行われた場合、時間の感覚がずれる可能性があります。
用途に応じて、関数を使い分けるのがおすすめです。

まとめ

setTmeout関数では、一定時間後に処理。
setInterval関数では、一定時間毎に処理。

両者の違いは間隔時間の開始時点が異なることをご紹介していきました。
遅延関数を使用したい場合、よく使う関数になると思いますので、参考にしてみてください。

良かったら次回の記事も見てみてくださいね！
それでは、本記事をご覧くださり、ありがとうございました。

投稿【JQuery】遅延実行でイベントを発生させる方法は nyanblog ~にゃんぶろぐ~ に最初に表示されました。