고정 헤더 영역
상세 컨텐츠
본문
setInterval(함수, 시간)
: 일정 시간 간격을 두고 함수를 실행하는 방법(밀리세컨드가 단위)
setTimeout(함수, 시간)
: 일정 시간 간격을 두고 함수를 실행하는 방법
function sayHello () {
console.log("hello");
}
setInterval(sayHello, 5000) // 5초에 한번씩 콘솔에 hello 출력
setTimeout(sayHello, 5000) // 5초 이후에 콘솔에 hello 출력 (그 이후엔 출력 되지 않음)Date 객체
new Date() 를 호출하면 새로운 Date 객체가 만들어짐.
let now = new Date();
console.log(now); // 현재 날짜 및 시간이 보여짐
new Date(year, month, date, hours, minutes, seconds, ms)
주어진 인수를 조합해 만들 수 있는 날짜가 저장된 객체가 반환됨
기본 함수
| 함수명 | 의미 | 설명 | |
| getFullYear() | setFullYear() | 년도 | |
| getMonth() | setMonth() | 월 | 0~11 > 1월~12월 |
| getDate() | setDate() | 일 | |
| getDay() | setDay() | 요일 | 0~6 > 일요일 ~ 토요일 |
| getHours() | setHours() | 시간 | |
| getHours() | setHours() | 분 | |
| getMilliseconds() | setMilliseconds() | 밀리초 | |
| getSeconds() | setSeconds() | 초 | |
| getTime() | setTime() | Unix 타임 | 1970/1/1 12:00 기준 경과한 밀리 초 |
padStart(newLength, "padString")
: 현재 문자열의 시작을 다른 문자열로 채워 주어진 길이 값을 갖는 문자열을 반환함
무조건 String 형태를 받아야 함
var str = "Hi";
console.log(str.padStart(10)); // " Hi"
console.log(str.padStart(10, "!")); // "!!!!!!!!Hi"
index.html
<!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">
<title>Momentum App</title>
<link rel = "stylesheet" href = "style.css">
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<form class = "hidden" id = "login-form">
<input required maxlength = "15" type = "text" placeholder = "What is your name?"/>
<button>Log In</button>
</form>
<h1 id = "greeting" class = "hidden"></h1>
<h2 id="clock">00:00:00</h2>
<script src = "js/clock.js"></script>
<script src = "js/greeting.js"></script>
</body>
</html>
clock.js
const clock = document.querySelector("h2#clock");
function getClock () {
const date = new Date();
const hour = String(date.getHours()).padStart(2,"0");
const minutes = String(date.getMinutes()).padStart(2,"0");
const second = String(date.getSeconds()).padStart(2,"0");
clock.innerText = `${hour}:${minutes}:${second}`;
}
getClock();
setInterval(getClock, 1000)'Javascript' 카테고리의 다른 글
| [노마드코더] 바닐라JS 공부 7일차(To Do List) (0) | 2022.01.15 |
|---|---|
| [노마드코더] 바닐라JS 공부 6일차(Quotes and Background: Math객체 난수) (0) | 2022.01.11 |
| [노마드코더] 바닐라JS 공부 4일차(Login 구현:preventDefault, localStorage) (0) | 2022.01.04 |
| [노마드코더] 바닐라JS 공부 3일차(JS에서 HTML에 접근, event) (0) | 2022.01.02 |
| [노마드코더] 바닐라JS 공부 2일차(함수, Return, 조건문) (0) | 2021.12.28 |
