UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#111 JavaScriptでカウントダウンタイマーを表示

記入日:2023-04-29 編集日:2023-04-29

JavaScriptでカウントダウンタイマーを表示する方法を解説してみようと思います。

この記事を読むと(約5分)
JavaScriptでカウントダウンタイマーを表示する方法がイメージできます。

JavaScriptでカウントダウンタイマーを表示

以下のJavaScriptコードは、指定された分数のカウントダウンタイマーを表示するためのものです。

  1. countdown()関数を定義します。この関数は、カウントダウンの開始時間(分数)を引数として受け取ります。
  2. tick()関数を定義します。この関数は、1秒ごとに呼び出され、タイマーのカウントダウンを更新します。
  3. tick()関数の中で、タイマーを表示する要素を取得し、残りの時間を計算します。
  4. 残りの時間を更新し、タイマーを表示する要素に反映します。
  5. 残り時間がまだある場合は、1秒後に再びtick()関数を呼び出します。
  6. 残り時間がなくなった場合、分数を減らして再度countdown()関数を実行します。
  7. 最後に、countdown()関数を呼び出して、5分のカウントダウンを開始します。

以下が、コードの全体的な概要です。

function countdown(minutes) {
    // 変数を初期化
    var seconds = 60;
    var mins = minutes;
    // tick()関数を定義
    function tick() {
        // タイマーを表示する要素を取得
        var counter = document.getElementById("timer");
        // 残りの時間を計算
        var current_minutes = mins-1;
        seconds--;
        // タイマーを更新
        counter.innerHTML = current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds) ";
        // 残り時間がまだある場合は、1秒後にtick()を再度実行
        if( seconds > 0 ) {
            setTimeout(tick, 1000);
        } else {
            // 残り時間がなくなった場合、分数を減らして再度countdown()を実行
            if(mins > 1){
                setTimeout(function () { countdown(mins - 1); }, 1000);
            }
        }
    }
    // tick()を実行
    tick();
}
// 5分のカウントダウンを開始
countdown(5); 

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。