CODEWITHSUNDEEP
javascripthtmljquerycss
Suny
Suny

Reputation: 29

How to toggle a div in correct time and day of the week

I want to know how to toggle a div on correct time and week days. Example:- when sunday 12:00pm div1 will show, in monday 12:00 div2 will show others time stay hidden. This code works fine hide show on correct time but i also want to add Week days to show hide like if (day== sunday || n > '08:59' && n < '09:59'){}

        function running() {
        Object.prototype.twoDigits = function () {
            return ("0" + this).slice(-2);
        }

        // get current date and time
        let now = new Date();
        n = now.getHours().twoDigits() + ':' + now.getMinutes().twoDigits();

        if (n > '08:59' && n < '09:59') {
            $(".class-1").addClass("now").removeClass("old");
            $('.class-1 .overlay').hide();
            $('.class-2 .overlay').show();
            $('.class-3 .overlay').show();
            $('.class-4 .overlay').show();
            $('.class-1 .overlay-2').hide();
            $('.class-2 .overlay-2').hide();
            $('.class-3 .overlay-2').hide();
            $('.class-4 .overlay-2').hide();
        }
        else if (n > '09:59' && n < '10:59') {
            $(".class-2").addClass("now").removeClass("old");
            $('.class-1 .overlay').hide();
            $('.class-2 .overlay').hide();
            $('.class-3 .overlay').show();
            $('.class-4 .overlay').show();
            $('.class-1 .overlay-2').show();
            $('.class-2 .overlay-2').hide();
            $('.class-3 .overlay-2').hide();
            $('.class-4 .overlay-2').hide();
           
        }
        else if (n > '10:59' && n < '11:29') {
            
            $('.class-1 .overlay').hide();
            $('.class-2 .overlay').hide();
            $('.class-3 .overlay').show();
            $('.class-4 .overlay').show();
            $('.class-1 .overlay-2').show();
            $('.class-2 .overlay-2').show();
            $('.class-3 .overlay-2').hide();
            $('.class-4 .overlay-2').hide();
           
        }   
       
        else {
            $(".class-1").addClass("old").removeClass("now");
            $(".class-2").addClass("old").removeClass("now");
            $(".class-3").addClass("old").removeClass("now");
            $(".class-4").addClass("old").removeClass("now");
            $('.hooray').show();
            $('.overlay').show();
            $('.overlay-2').hide();
          
        }
    }
    $(document).ready(function () {
        running();
    });

Upvotes: 0

Views: 153

Answers (1)

Jirka Svoboda
Jirka Svoboda

Reputation: 418

You can use const d = now.getDay() which returns 0 - 6 where 0 = Sunday. Then you can chech for specific day in your if statements like if(d === 3 && … ) to check wednesday.

Upvotes: 1

Related Questions