バニラJSを使用してChromeアプリケーションを作成する::復習5.0から5.3

chapter 5 : Clock

5.0 Intervals

tip:新しい機能を持つjs,css...実施するたびに、ファイルが別々になり、管理が容易になります.
Interval:一定時間ごとに同じ動作が発生することを示します.これらの概念もjsに組み込まれており,使用方法は非常に容易である.
例えば、5秒おきにhelloという単語がconsoleに表示されます.そうすれば、次のようになります.(時間はミリ秒単位、5秒は5000ミリ秒)

const clock=document.querySelector("#clock");

function sayHello(){
    console.log("hello");
}

setInterval(sayHello, 5000);

5.1 Timeouts and Dates

タイムアウト機能があります.この機能は、設定した時間後に指定動作をさせる機能です.次のように使用すると、関数は5秒後に1回実行されます.

const clock=document.querySelector("#clock");

function sayHello(){
    console.log("hello");
}

setTimeout(sayHello, 5000);

jsには現在の日付をインポートする機能があり、コンソールウィンドウにnew Date()を入力すると現在の時刻、日付などが表示されます.関連ドキュメントにはgetDay()、getHours()、getMinutes()、getSeconds()などの関連関数がたくさんあります.これによりクロックを容易に実現できます.

const clock=document.querySelector("#clock");

function getClock(){
    const date = new Date();
    clock.innerText=`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
getClock();
setInterval(getClock, 1000);

5.2 PadStart

padStart:stringの関数を書き込むことができます
ex. "1".padStart(2,"0")
(2文字を保持し、2文字でない場合は0を追加)
->"01"
同様にpadEndを後に追加
padStartはstring関数に使用されるため、stringを使用してgetHours()関数をラップして適用する必要があります.5.1コードの修正は以下の通りです.

const clock=document.querySelector("#clock");

function getClock(){
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0");
    const minutes =String( date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");
    clock.innerText=`${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);

5.3総復習