Clock

15662 ワード
テキストリンク
符号化なし-バニラJSを使用してChromeアプリケーション、#5 Clockのコンテンツを作成します.
const clock = document.querySelector("#clock");

clock.innerText = "clock";

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

// 이 함수를 매초, 매분마다 반복 실행하고 싶다.

// setInterval(
//		인자 1 : 니가 실행하고자 하는 함수, 
//		인자 2 : function 간격을 얼마로 할지
// )

// setInterval(sayHello, 5000);
// => 5초마다 함수 실행

// 일정한 시간 뒤에 함수 실행
// setTimeout(sayHello, 5000);

// Date 객체의 메소드
// const date = new Date();
// console.log(date.getDate());
// console.log(date.getDay());
// console.log(date.getHours());
// console.log(date.getFullYear());

function getClock() {
    const date = new Date();
    const hour = String(date.getHours()).padStart(2,"0");
    const min = String(date.getMinutes()).padStart(2,"0");
    const sec = String(date.getSeconds()).padStart(2,"0");
  
  // padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 
  // 주어진 길이를 만족하는 새로운 문자열을 반환한다. 
  // 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.
  
    clock.innerText = `${hour} : ${min} : ${sec}`;
}

getClock();
setInterval(getClock, 1000);
Stringオブジェクトの組み込み関数padStartを使用しない場合は?次のコードを記述する必要がある場合があります.
clock.innerText = 
  `${hour < 10 ? `0${hour}` : hour} : 
   ${min < 10 ? `0${min}` : min} : 
   ${sec < 10 ? `0${sec}` : sec}`;
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width-device-width", initial-scale="1.0">
        <link rel="stylesheet" href="style.css">
        <title>#4</title>
    </head>
</html>

<body>
    <form class="hidden" id="login-form">
    </form>
    <h1 class="hidden" id="greeting"></h1>
    <h2 id ="clock"></h2>
    <script src="greetings.js"></script>
    <script src="clock.js"></script>
</body>
次は挨拶です!!
白駿2485号
Activityを知る前に、良いことを知っています.