목차
바닐라 JS로 크롬 앱 만들기 (1)
: Create Chrome App with Vanilla JS → cavjs
5.0 Intervals
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form action="login-form"></form>
<h2 id="clock">00:00</h2>
<script src="js/clock.js"></script>
<script src="js/greetings.js"></script>
</body>
</html>const clock = document.querySelector("h2#clock");
// intervals: 매번 일어나게 하는 것
// timeout
// clock.innerText ="lalalsl";
function sayHello(){
console.log("hello");
}
setInterval(sayHello, 5000) //-- arguments: ({function명},{호출간격 ms}) //5초마다 실행5.1 Timeouts and Dates
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form action="login-form"></form>
<h2 id="clock">00:00:00</h2>
<script src="js/clock.js"></script>
<script src="js/greetings.js"></script>
</body>
</html>- javascript
const clock = document.querySelector("h2#clock");
// intervals: 매번 일어나게 하는 것
// timeout: 일정시간 지난 후 실행
// function sayHello(){
function getClock(){
// console.log("hello");
const date = new Date();
// console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
clock.innerText =`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
getClock(); // 웹사이트 load되자마자 getClock()실행
// setTimeout(sayHello, 5000);
setInterval(getClock, 1000); //매 초마다 실행
// new Date()
// const date = new Date()
// date.getDate(); //s날짜
// date.getDay(); //요일 0-일요일
// date.getFullYear(); //suseh
// date.getHours(); //시간
// date.getMinutes(); //분
// date.getSeconds();
// new date().getHours();
// new date().getMinutes();
// new date().getSeconds();5.2 PadStart
const clock = document.querySelector("h2#clock");
function getClock(){
const date = new Date();
// const hours = date.getHours().padStart;
// const minutes = date.getMinutes();
// const seconds = date.getSeconds();
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 =`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
clock.innerText =`${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);
/*
//padStart(): string에 쓸 수있는 function
"1".padStart(2,"0"); //2글자가 아니라면 앞에 0추가
//--==> "01"
"12".padStart(2,"0"); //2글자가 아니라면 앞에 0추가
//--==>> "12"
"1".padEnd(2,"0"); //2글자가 아니라면 앞에 0추가
//--==>> "10"
"hello",padStart(20,"x");
//--==>> "xxxxxxxxxxxxxxxhello"
new Date().getHours();
//--==>> 19 → 숫자
String(new Date().getHours());
//--==>> "19" → 문자
*/5.3 Recap
'📝 배우고 익히기 + > 바닐라 JS로 크롬 앱 만들기' 카테고리의 다른 글
| [바크앱] 10: 7.0-8.2 (1) | 2023.09.15 |
|---|---|
| [바크앱] 9: 6.0-6.2 (0) | 2023.09.14 |
| [바크앱] 7: 4.0-4.7/6.0(과제강의) (1) | 2023.09.12 |
| [바크앱] 5: 2.13 -2.15 , 3.6 - 3.8 (1) | 2023.09.09 |
| [바크앱] 4: 3.0 - 3.5 (1) | 2023.09.08 |
