Clock - interval과 Timeout
📌 interval
: 매번 일어나야 하는 것에 쓰는 것.
📌 setInterval( [함수명], [시간(ms)] )
: 설정한 시간마다 함수 실행되도록함.
📌 setTimeout( [함수명], [시간(ms)] )
: 설정한 시간 뒤에 설정한 함수 1번만 실행.
Clock - Date
📌 Date( )
| .getDate( ) | 몇 일인지 반환. |
| .getDay( ) | 요일을 숫자로 반환. (0부터 시작. 0은 일요일.) |
| .getFullYear( ) | 몇 년인지 반환. |
| .getHours( ) | 몇 시인지 반환. |
| .getMinutes( ) | 몇 분인지 반환. |
| .getHSeconds( ) | 몇 초인지 반환. |
💡 .padStart( [maxLength], [문자열] )
: maxLength가 아닌 경우, 문자 앞에 설정한 문자열 추가.
예. "1".padStart(2, "0") → "1"
"10".padStart(2, "0") → "10"
💡 .padEnd( [maxLength], [문자열] )
: maxLength가 아닌 경우, 문자 뒤에 설정한 문자열 추가.
예. "1".padEnd(5, "x") → "1xxxx"
"12345".padEnd(5, "x") → "12345"
📄 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">
<link rel="stylesheet" href="css/style.css"/>
<title>Momentum</title>
</head>
<body>
<!-- greetings -->
<form id="login-form" class="hidden">
<input required maxlength="15" type="text" placeholder="What is your name?"/>
<input type="submit" value="Log In"/>
</form>
<!-- clock -->
<h2 id="clock">00:00:00</h2>
<!-- greetings -->
<h1 id="greeting" class="hidden"></h1>
<!-- import js -->
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
</body>
</html>📄 clock.js
const clock = document.querySelector("h2#clock");
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");
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock(); // 실행 후 바로 getClock 호출.
setInterval(getClock, 1000); // 1초마다 getClock 호출.
Quotes - 글귀 랜덤으로 출력되도록
📌 Math.random( )
: 0.0 - 1.0 사이의 수 랜덤으로 반환.
📌 소수점 없애는 방법
| Math.round( ) | 0.5이상이면 올림, 아니면 버림. |
| Math.ceil( ) | 모든 수 올림. |
| Math.floor( ) | 모든 수 버림. |
📄 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">
<link rel="stylesheet" href="css/style.css"/>
<title>Momentum</title>
</head>
<body>
<!-- greetings -->
<form id="login-form" class="hidden">
<input required maxlength="15" type="text" placeholder="What is your name?"/>
<input type="submit" value="Log In"/>
</form>
<!-- clock -->
<h2 id="clock">00:00:00</h2>
<!-- greetings -->
<h1 id="greeting" class="hidden"></h1>
<!-- quotes -->
<div id="quote">
<span></span>
<span></span>
</div>
<!-- import js -->
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
</body>
</html>📄 quotes.js
const quotes = [
{
quote : "The greatest glory in living lies not in never falling, but in rising every time we fall.",
author : "Nelson Mandela",
},
{
quote : "Life is either a daring adventure or nothing at all.",
author : "Helen Keller",
},
{
quote : "Life is unfair, get used to it.",
author : "Bill Gates",
},
{
quote : "The way to get started is to quit talking and begin doing.",
author : "Walt Disney",
},
{
quote : "I find that the harder I work, the more luck I seem to have.",
author : "Thomas Jefferson",
},
{
quote : "Opportunities don’t happen. You create them.",
author : "Chris Grosser",
},
];
const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;
Background - 배경 랜덤으로 보이도록
📌 document.createElement( )
: html element 추가.
html body에 생성된 것은 아님.
📌 document.body.appendChild( )
: html의 body에 element 추가.
📄 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">
<link rel="stylesheet" href="css/style.css"/>
<title>Momentum</title>
</head>
<body>
<!-- greetings -->
<form id="login-form" class="hidden">
<input required maxlength="15" type="text" placeholder="What is your name?"/>
<input type="submit" value="Log In"/>
</form>
<!-- clock -->
<h2 id="clock">00:00:00</h2>
<!-- greetings -->
<h1 id="greeting" class="hidden"></h1>
<!-- quotes -->
<div id="quote">
<span></span>
<span></span>
</div>
<!-- import js -->
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
</body>
</html>📄 background.js
const images = [
"0.png", "1.png", "2.png", "3.png", "4.png",
"5.png", "6.png", "7.png", "8.png", "9.png", "10.png",
"11.png", "12.png", "13.png", "14.png", "15.png"
];
const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage);'클론코딩 > 노마드코더 크롬 앱' 카테고리의 다른 글
| [클론코딩/크롬 앱] 노마드 코더 크롬 앱 클론코딩 #4 마무리 (0) | 2022.10.31 |
|---|---|
| [클론코딩/크롬 앱] 노마드 코더 크롬 앱 클론코딩 #3 To Do List, weather (0) | 2022.10.19 |
| [클론코딩/크롬 앱] 노마드 코더 크롬 앱 클론코딩 #1 Login (0) | 2022.10.17 |
댓글