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

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

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

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

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

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

<script>
        (function printNow() {
            const now = new Date();
            let nowHour = now.getHours();
            let nowMt = now.getMinutes();

            const stoar = new Date(`${now.toLocaleDateString()} 09:00:00`); //사용자로부터 시간을 설정 받는다.
            const etoar = new Date(`${now.toLocaleDateString()} 18:00:00`); //사용자로부터 시간을 설정 받는다.

            let shour = stoar.getHours();
            const sminute = stoar.getMinutes();

            let ehour = etoar.getHours();
            const eminute = etoar.getMinutes();

            console.log((nowHour >= ehour && nowHour < shour) || (nowMt >= eminute && nowMt < sminute), ':라이트 모드 시작')
            console.log((nowHour >= shour && nowHour < ehour) || (nowMt >= sminute && nowMt < eminute), ':다크 모드 시작')
        }());
    </script>

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

더 많은 컨텐츠를 보고 싶은 분들은 방문해서 구경오세요:)
TriplexLab Blog