Interval

💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗

📖 Interval (정한 시간마다 호출)

-> setInterval

◾ html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <h1 class="practice">안녕하세요 반가워요 </h1>
    <h2 id="clock">00:00:00</h2>
    <script src="./js/index.js"></script>
</body>
</html>

◾ js code

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

function speaking() {
    console.log("1초마다 반복하기");
}

setInterval(speaking, 1000);    // 1000ms 1초

✳ 시계 만들기

◾ js code

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

function setclocked() {
    const date = new Date();
    console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}

setInterval(setclocked, 1000);

◾ new Date() = 현 날짜, 시간 등 나타내줌

◾ ` ` = 백틱

◾ js code

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

function setclocked() {
    const date = new Date();
    // innerText 로 화면에 구현하기
    clocked.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}

// 키자마자 시간 나오게하기
setclocked();
// 그 후 초마다 시간 나오게하기
setInterval(setclocked, 1000);

저작자표시

후야

Interval

💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗

📖 Interval (정한 시간마다 호출)

티스토리툴바