특정 시간 이후로 페이지 사용 가능하게끔 간단한 레이어팝업 공지 올리는 Javascript
페이지 정보
작성자 인바이트미 댓글 0건 조회 297회 작성일 23-04-09 21:44본문
특정 시간 이후로 페이지 사용 가능하게끔 간단한 레이어팝업 공지 올리는 Javascript
만약 HTML 내용이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Limited Element</title>
</head>
<body>
<div id="myDiv" style="position:relative;z-index:10000;background-color:rgba(0,0,0,.87);align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%">
<div style="color:#fff;font-size:16px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;">
이벤트 페이지<br>준비중<br><br>
(4월9일 오전 9시 오픈)
</div>
</div>
</body>
</html>
이렇게라면, javascript는
<script>
document.addEventListener('DOMContentLoaded', function() {
const myDiv = document.getElementById('myDiv');
// 현재 날짜와 시간을 가져옵니다.
const now = new Date();
// 2023년 4월 9일 오전 9시의 날짜와 시간을 설정합니다.
// 월은 0부터 시작하기 때문에 4월은 3으로 표기합니다.
const deadline = new Date(2023, 3, 9, 9, 0, 0);
// 현재 시간이 마감 시간 이후라면 myDiv 요소를 숨깁니다.
if (now >= deadline) {
myDiv.style.display = 'none';
}
});
</script>
댓글목록
등록된 댓글이 없습니다.