완성본
동작설명: 클릭버튼을 누르면 10초동안 팝업보이지않게 쿠키가 생성된다. 10초안에는 새로고침을 해도 팝업이 뜨지않는다. 하지만 10초 후에 새로고침을 할 경우에는 생성했던 쿠기가
사라졌기때문에 새로고침하면 팝업이 뜨는걸 확인할 수 있다.
1. 팝업창 만들기
html
<body> <div> <p>남은 시간 :<span class="popup-time"></span></p> </div> <div class="popup-wrap"> <div class="popup"> <div class="popup-head"> <span class="popup-btn"></span> </div> <div class="popup-body"></div> <button class="event-btn">클릭</button> </div> </div> </body>
js
let popupBtn = document.querySelector(".popup-btn");
let popupEvent = document.querySelector('.event-btn');
let popupCookie = getCookie("event-popup");
function popupOpen(){
let popup = document.querySelector('.popup-wrap');
if(popup.classList.contains("is-on")){
popup.classList.remove('is-on');
}else{
popup.classList.add('is-on');
}
popupBtn.addEventListener("click",popupOpen);popup-wrap 클래스를 none으로 설정하고, is-on 클래스를 block로 설정하고,
classList.contains , remove, add 와 addEventListener 이용해 x 버튼을 누르면 팝업창이 닫히게끔 설정.
2. 클릭 버튼을 누르면 지정한 시간동안 유지되는 쿠키 생성하기
popupEvent.addEventListener("click",function(){
setCookie("event-popup",true,10);
})
function setCookie(c_name,value,time){
let date = new Date(); // date에 현재시간 설정
date.setTime(date.getTime() + time * 1000); // 현재시간을 가져와서 10초를 더한걸 다시 date 에 셋한다.
let str = c_name+"="+value+";expires="+date.toUTCString()+";path=/"; // 10초를 더해서 셋된 시간
let str2 = getCookieTime(str);
document.cookie=c_name+"="+`{"value":"${value}","time":"${date.toUTCString()}"}`+";expires="+date.toUTCString()+";path=/"
}event-popup 이라는 name을 가진 쿠키가 value와 time이 설정되어 생성된다.
3. 정한 시간마다 동작하는 함수를 통해 생성한 쿠기시간에서 현재시간을 빼 남은시간을 카운트한다.
let setTime = setInterval(() => {
let date2 = new Date(); //현재시간
let timeTag = document.querySelector('.popup-time');
// getCookie로 가져온 name이 event-popup인 생성된 쿠키 함수가 undefined 가 아니면
if(popupCookie != undefined)
{
let time = JSON.parse(popupCookie).time;
let date = new Date(time);
timeTag.innerHTML = times(popupTime(date, date2));
}else{
timeTag.innerHTML = "시간끝";
}
}, 1000);
function popupTime(date1,date2) {
return date1.getTime() - date2.getTime();
}정한 시간마다 동작하는 함수인 setInterval 함수를 사용하고,JSON.parse로 생성한 popupCookie의 time을 객체로 변경
생성한 쿠키 시간에서 현재 시간을 빼서 남은시간을 보여준다. 1초마다
function times(time){
let day = Math.floor(time / (24 * 60 * 60 * 1000)); //Math.floor 소수점 반올림
time %= (24 * 60 * 60 *1000);
let hour = Math.floor(time / (60 * 60 * 1000));
time %= (60 * 60 * 1000);
let min = Math.floor(time /(60 * 1000));
time %= (60 * 1000);
let sec = Math.floor(time / 1000);
if(time < 0)
{
// 지울 Interval 함수 매개변수로 전달하면된다.
clearInterval(setTime);
let timeTag = document.querySelector('.popup-time');
timeTag.innerHTML = "";
}
return `${day}일 ${hour}시 ${min}분 ${sec}초`;
}남은 시간은 times 함수를 통해 위의 두시간 차이를 매개변수로 받고 일,시,분,초 로 나누어 return의 형식으로 보낸다.
이후 time 0이하가 되면 시간이 마이너스 표기가 되기때문에 clearInterval로 반복을 중단하면 된다.
4. 가져온 쿠키의 값에서 만료시간만 뽑아내서 반환하고 싶을 때
function getCookieTime(cookie){
let str = cookie.split(';');
let str2 = str.find(function(i){
let temp = i.trim();
return temp.startsWith('expires=');
})
if(str2){ //str2 안에 값이 있다면
let str3 = str2.trim();
return new Date(str3);
}
else{
return null;
}
}
split 함수를 통해 ;기준으로 나누고 trim 함수로 공백을 없애고, startWith로 'expires='로 시작하는 문자열을 찾아 str2에 지정한다.
한걸음씩