👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#5.1-5.3

change up·2023년 6월 12일

노마드코더 클론코딩

목록 보기

9/13

학습주제 : clock기능 구현하기

<!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="css/app.css">
    <title>Momentum</title>
</head>
<body>
    <form class="hidden" id="login-form">
    <input type="text" />
    <button id="button">Log In</button>
    <a href="https://nomadcoders.co/" class="hidden">Go nomad!</a>
    </form>
    <h2 id ="clock">00:00:00</h2>
    <h1 id="greeting" class="hidden"></h1>
    <script src="js/clock.js"></script>
    <script src="js/greeting.js"></script>
</body>
</html>

const clock = document.querySelector("h2#clock")
//interval : 매번 일어나야 하는 무언가를 말한다.
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");}
/*padStart() : 원하는 방식으로 출력될 수 있도록 앞쪽에 문자열을 추가한다. <->padEnd()
"1",padStart(2,"0") : 두 자리수가 아닐경우에 앞에 '0'을 추가한다.
String(num) : number -> string으로 바꿔줌
   clock.innerText = `${hours}:${minutes}:${seconds}`;
date의 기능
1)new Date() : //Mon Jun 12 2023 18:03:10 현재 시간과 날짜를 나타냄
2)date.getHours :현재시간
3)date.getMinutes :분
4)date.getSeconds:초
2+3+4를 해서 매초마다 시간을 나타내는 Date object를 생성할 수 있다.*/
getClock();
//웹사이트가 실행되자마자 바로 시계기능이 가능하도록 호출한다.
setInterval(getClock, 1000);
//1초마다 호출이 진행된다.

change up

새싹이

이전 포스트

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#4.6-5.0

다음 포스트

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#5.1-5.3

노마드코더 클론코딩

학습주제 : clock기능 구현하기

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#4.6-5.0

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#6.0~6.2

0개의 댓글