현재 서버시간으로 팝업 (스크립트) 제어

현재 서버시간으로 팝업 (스크립트) 제어하기

javascript 의 Date() 함수는 현재 컴퓨터 시간을 따라가기 때문에 100% 보장하기 힘들다

그래서 생각해본게 서버의 시간을 기준으로 스크립트를 예약 실행한다면 보다 나은 결과를 얻을것 같다

여기서는 php 기준으로 작성

html로 팝업 작성

<div class="popup_wrap" style="background:#fc0">
    팝업!
</div>

javascript + php

var phpDate = "<?php print date("Y-m-d H:i:s")?>";
var today = new Date(phpDate);
var endDate = new Date(2022,2,8,17,19);
isUseDay();
setInterval("isUseDay()", 30000);
function isUseDay() {
    today.setSeconds(today.getSeconds()+30);
    var year = today.getFullYear();
    var month = today.getMonth() + 1;
    var date = today.getDate();
    var hours = today.getHours();
    var minutes = today.getMinutes();
    var seconds = today.getSeconds();
    if (month < 10){
        month = "0" + month;
    }
    if (date < 10){
        date = "0" + date;
    }
    if (hours < 10){
        hours = "0" + hours;
    }
    if (minutes < 10){
        minutes = "0" + minutes;
    }
    if (seconds < 10){
        seconds = "0" + seconds;
    }
    if(today > endDate) {
        $('.popup_wrap').css('display','none') 
    } else {
        $('.popup_wrap').css('display','block') 
    }
}

phpDate 는 서버시간을 불러오는 변수이고

today에 phpDate를 삽입

endDate에는 비교할 기준날짜를 삽입

마지막 if문에서 팝업영역을 display:none, display:block 으로 제어

전체 코드

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>현재 서버 시각으로 팝업(스크립트) 제어</title>
</head>

<body>
<div class="popup_wrap" style="background:#fc0">
    팝업!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var phpDate = "<?php print date("Y-m-d H:i:s")?>";
var today = new Date(phpDate);
var endDate = new Date(2022,2,8,17,19);
isUseDay();
setInterval("isUseDay()", 30000);
function isUseDay() {
    today.setSeconds(today.getSeconds()+30);
    var year = today.getFullYear();
    var month = today.getMonth() + 1;
    var date = today.getDate();
    var hours = today.getHours();
    var minutes = today.getMinutes();
    var seconds = today.getSeconds();
    if (month < 10){
        month = "0" + month;
    }
    if (date < 10){
        date = "0" + date;
    }
    if (hours < 10){
        hours = "0" + hours;
    }
    if (minutes < 10){
        minutes = "0" + minutes;
    }
    if (seconds < 10){
        seconds = "0" + seconds;
    }
    if(today > endDate) {
        $('.popup_wrap').css('display','none') 
    } else {
        $('.popup_wrap').css('display','block') 
    }
}
</script>
</body>
</html>

물론 php환경의 서버에 업로드해야 동작한다

월은 0 부터 시작이므로

현재가 10월이면 9로 적으면된다

100퍼센트에서 살짝 아쉬운 방법이다

이유는 서버시간이 제대로 동작하지 않는다면

이 스크립트도 제대로 동작하지 못한다

다른방식(로컬타임)의 시간으로 예약하는 방법은 이전글들을 참고!!

2022.02.24 - [php] - 예약시간에 실행하기 php

예약시간에 실행하기 php

예약시간에 실행하기 php php로 서버시간에 if문으로 실행을 제어하는 방식 $html에 html을 입력 $html = ' 팝업입니다 '; dates에 현재시간을 저장 $dates = date(DATE_ATOM, mktime()); times에 내가 지정할..

blog.lii.kr

2021.09.28 - [Javascript] - 예약시간에 스크립트 실행하기2

예약시간에 스크립트 실행하기2

예약시간에 스크립트 실행하기2 - 스크립트 예약 실행 이전포스트 참조 2021.09.27 - [자바스크립트] - 예약시간에 스크립트 실행하기 endDate) { $('.popup_wrap').css('display','none') } 현재시간이 지정시간..

blog.lii.kr

2021.09.27 - [Javascript] - 예약시간에 스크립트 실행하기

예약시간에 스크립트 실행하기

예약시간 넣어 스크립트 실행하기 - 스크립트 예약 실행 if (today > endDate) { $('.popup_wrap').css('display','none') } 현재시간이 지정시간보다 클 경우 .popup_wrap 를 display none (여기선 팝업을 종료..

blog.lii.kr

저작자표시 비영리 동일조건

'blog > Javascript' 카테고리의 다른 글

[aos.js] aosjs 애니메이션 플러그인 캐쉬 오류 (0)	2022.08.25
페이지 전환 스크립트 + 공사중 페이지 (0)	2021.10.05
페이지 접속시 모바일 페이지로 이동 (0)	2021.10.05
예약시간에 스크립트 실행하기2 (0)	2021.09.28
예약시간에 스크립트 실행하기 (0)	2021.09.27

blog.wdev.kr

현재 서버시간으로 팝업 (스크립트) 제어