let 팝업종료시점 = localStorage.getItem("popup-hide") / 1000;
let 현재시점 = Date.now() / 1000;
document.querySelector(".popup_box button").addEventListener("click", (e) => {
document.querySelector(".popup_box").style.display = "none";
if (document.querySelector(".popup_box input[type=checkbox]").checked) {
localStorage.setItem("popup-hide", Date.now());
}
});
if (localStorage.getItem("popup-hide")) {
document.querySelector(".popup_box").style.display = "none";
if (팝업종료시점 + 24 * 60 * 60 < 현재시점) {
document.querySelector(".popup_box").style.display = "block";
localStorage.removeItem("popup-hide");
}
} else {
document.querySelector(".popup_box").style.display = "block";
}
}<body>
<div class="popup_box">
<p>3. 팝업창 구현하기</p>
<p>
<input type="checkbox"> 오늘 하루 이 창 열지 않기
</p>
<p>
<button>닫기</button>
</p>
</div>
</body> 닫기버튼을 클릭하면 팝업창이 닫힌다
checkbox를 체크하고 클릭하면 일정시간 팝업창이 나타나지 않는다
체크시 로컬스토리지에 datenow 값을 setitem 한다
로컬스토리지에 값이 있으면 새로고침을 해도 창이 나타지 않는다.
하루가 지나면 팝업창이 새로고침하면 다시 나타난다
팝업종료시점+하루 < 현재시점 (초로환산하려면 1000씩 나눠야 함)
'프로그래밍 > Javascript' 카테고리의 다른 글
| [javascript]함수 선언 var let const 차이 (0) | 2023.09.06 |
|---|---|
| 챌린지2일차)변수,배열,객체 (0) | 2023.09.06 |
| web application program (0) | 2023.09.06 |
| 챌린지1일차) 왜 자바스크립트일까? (0) | 2023.09.05 |
| javascript localstoreage를 이용한 todolist만들기(1/2) (0) | 2023.08.26 |