Question

I have a following HTML

<div id="btn_1">Button 1</div>
<div id="btn_2">Button 1</div>
<div id="btn_3">Button 1</div>

I want add a css class for period of time, for example: If the hour is between 00:00 to 06:59 add class “select” to id “btn_1”, for between 07:00 to 10:59 am add the class to id “btn_2”, and finally 11:00 to 16:00 add class to id “btn_3”.

Any help please?

Answer 1

$(function() {
    // get hour of time
    var hour = (new Date).getHours();

    // remove select class if already applied
    $('.select').removeClass('select');

    if (hour < 7) {  // 0:00 to 6:59
        $('#btn_1').addClass('select');
    } else if (hour < 11) {  // 7:00 to 10:59
        $('#btn_2').addClass('select');
    } else if (hour < 16) {  // 11:00 to 15:59
        $('#btn_3').addClass('select');
    }

})

Demo: http://jsfiddle.net/fS3jj/