[Day 3]クロック、ローカルストレージユーザ確認
17861 ワード
index.html
<!DOCTYPE html>
<html>
<head>
<title>Someting</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?">
</form>
<h4 class="js-greetings greetings"></h4>
<script src="index.js" ></script>
<script src="greeting.js"></script>
</body>
</html>index.css
h1{
color: #34495e;
}
.form,
.greetings {
display: none;
}
.showing {
display: block;
}clock.js
const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");
function getTime() {
const date = new Date(); // Date -> object
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
clockTitle.innerText =`${hours < 10 ? `0${hours}`:hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}
/*
`${hours < 10 ? `0${hours}`:hours}:
${minutes < 10 ? `0${minutes}` : minutes}:
${seconds < 10 ? `0${seconds}` : seconds}`;
시간을 표시할 때 22:11:1 -> 22:11:01로 표현하기 위해 삼항연산자를 사용했다.
*/
// 실행
function init() {
getTime();
setInterval(getTime, 1000); // 현재 브라우저에서 시간이 흐르는 걸 보여준다.
}
init();greeting.js
const form = document.querySelector(".js-form");
const input = document.querySelector("input");
const greeting = document.querySelector(".js-greetings")
const USER_LS = "curretUser";
const SHOWING_CN = "showing";
function paintGreeting(text) {
form.classList.remove(SHOWING_CN);
greeting.classList.add(SHOWING_CN);
greeting.innerHTML = `Hello ${text}`
}
function loadName() {
const currentUser = localStorage.getItem(USER_LS);
if(currentUser === null) {
// 현재 유저가 null 이라면 코드 실행
} else {
paintGreeting(currentUser); // 저장된 유저가 있다면, paintGreeting을 실행해!
}
}
function init() {
loadName();
}
init();
chromeウィンドウ->開発者ツール->アプリケーション->ローカルストレージ
References
Reference
この問題について([Day 3]クロック、ローカルストレージユーザ確認), 我々は、より多くの情報をここで見つけました https://velog.io/@withcolinsong/Day3시계-로컬스토리-유저-확인テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol