[JS]정해진 날짜 되면 html요소 삭제, 등장

 

HTML

<p id="remove">2024년 4월 25일 오후 9시 30분에 사라질 HTML 요소</p>
<p id="appear" style="display:none";>2024년 4월 25일 오후 9시 30분에 나타날 HTML 요소</p>

 

JS

// 사라질 시간 설정
const targetTime = new Date(2024, 3, 25, 9, 30, 0).getTime();

// 현재 시간과 targetTime의 차이 계산
function timeDiff() {
  return targetTime - Date.now();
}

// 1초마다 timeDiff() 함수 실행
const interval = setInterval(() => {
  const remainingTime = timeDiff();
  
  // 만약 현재 시간이 targetTime보다 이후라면
  if (remainingTime <= 0) {
    
    // HTML 요소 숨기기
    document.getElementById("remove").style.display = "none";
    
    // HTML 요소 보이기
    document.getElementById("appear").style.display = "block";
    
    //setInterval 종료
    clearInterval(interval);
  }
}, 1000);

 

Codepen

See the Pen [JS]정해진 날짜 되면 html요소 관리(작업중) by TytanLee (@TytanLee) on CodePen.

 

• 월은 시작값이 0부터 시작하기때문에 4월이면 3을 입력해준다.