Clock-バニラJSクロムアプリケーション遊牧エンコーダの作成

2754 ワード
padStart() setInterval String setTimeout Date object テキストリンク

クロックの作成


setInterval()


interval:「毎回」起こるべきこと
2秒ごとの間隔:2秒ごとに何が起こるか
ex)
function sayHello(){
		console.log("hello");}

setInterval(sayHello, 5000);
setInterval(a,b)
a=実行する関数
b=呼び出しの関数間隔を何ミリ秒(ミリ秒)書き出せばよいか.
5000ms = 5s

setTimeout()

setTimeout(sayHello, 5000);
上記のコードは、5秒後にsayHelloを実行することを意味します.

Date object


コンソールにnew Date()を入力すると、今日の日付情報が得られます.
コンソール内
const date = new Date()
date.getDate()
date.getDay()
date.getHours()
date.getFullYear()
などいろいろな価格があります.

現在の時刻を表すクロックの作成


html
<h2 id = "clock"></h2>
js
const clock = document.querySelector("h2#clock")

function getClock(){
	const date = newDate();
    clock.innerText =
    `${date.getHours()}:${date.getMinutes()}:${date.getSeconds}`}
    

getClock(); ---->화면에 바로 뜨게 하기 위해 함수 실행시켜준다.
SetInterval(getClck, 1000);

padStart()


stringを2文字で埋めます!
ex) 2 -> 02
この場合padStart()を使用できます.
padStart()はstringに書き込むことができる関数です.
pad = padding
ex)
"1".padStart(2,"0")
2=maxlength、すなわち文字列の長さは2です.
「0」=2文字でない場合は、前列に0を付けます.
ex)
"12".padStart(2,"0") ----> "12"출력됌.

適用-PadEnd()


paddEnd():後にpaddingを追加します.
ex)
"1".padEnd(2,"0") -----> "10" 출력됌.
"hello".padEnd(6,"x") -----> "xhello" 출력됌.

String()


数値を文字列に変換する関数.
注意事項)
Number():文字列->数値
ParseInt():文字列->整数
ParseFloat():文字列->実数

クロックコードの変更

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}
    }
[Django]掲示板の作成(3)-adminを追加し、会員登録ページに接続
Rolavel 8とラーラーベル7でスプレッドシート(Excel)からデータをアップロードする方法