사용자 시간 지정(예약 기능)

⏰ 사용자 시간 지정(예약 기능)

안녕하세요 TriplexLab 입니다.
오늘은 사용자 시간 지정 기능에 관해서 살펴보도록 하겠습니다 :)

이게 무슨 기능인지 감이 안오시는 분들을 위해서 캡처 사진 공유합니다.

사용자가 직접 시간을 설정 하는 기능 입니다.

위와 같이 사용자가 직접 원하는 시간을 설정할수 있는 기능 입니다.
위에 캡처본은 비록 라이트모드, 다크모드를 변경하는 것만 할수 있지만 
코딩을 다루는 저희로써는 이것을 활용해서 할수 있는 것이 많습니다 :)

✨ 사용자 시간 지정(예약 기능) 활용 예시

적절한 예시는 아니지만 비슷한 응용 예시는 다른 링크를 참고해주세요 👇👇 

jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정

 

✍️ 사용자 시간 지정(예약 기능) 코드

이것을 javascript 로 만들어봤습니다.

<script>
        /**
         * 시, 분 중에서 
         * 시, 분을 가지고 조건을 설정해서 원하는 시간때에, 원하는 것을 할수 있습니다.
        */
        (function(){
	    	const now = new Date();
            const stoar = new Date(`${now.toLocaleDateString()} 09:00:00`); //사용자로부터 시간을 설정 받는다.
            const etoar = new Date(`${now.toLocaleDateString()} 19:00:00`); //사용자로부터 시간을 설정 받는다.

            let STime = stoar.getTime();
            let ETime = etoar.getTime();

            if(Date.now() >= STime && Date.now() <= ETime){
                console.log("라이트 모드 시작");
            } else {
                console.log("다크 모드 시작");
            }
        })();
    </script>

 

if문을 활용해서 다음과 같이 사용 할수도 있을것 입니다 :)

if(Date.now() >= STime && Date.now() <= ETime){
	console.log("라이트 모드 시작");
} else {
	console.log("다크 모드 시작");
}

 

위 코드는 시간을 컨트롤 할수 있는 코드에 집중되어 있습니다.
이것을 활용해서 예약기능이 가능한 웹사이트를 제작해 보세요:)

위에 코드를 파일로도 제공합니다.
생각보다 코드는 간단합니다. 필요하신분들은 다운받아서 사용하세요:)
(현재 날짜와 시간을 초단위로 반복 출력하는 예제도 있습니다.)

ex.zip

0.00MB