Geek asks and answers

How to change div content to time of day?

I want to be able to change the contents of a specific div depending on the user's time. For example, if it is 5am, then certain content will display. If it is 6am, shows different content.

John Doe 8am-4pm (changes to that name when its 8am-4pm)
John Doe 5pm-6pm (changes to that name when its 5pm-6pm)
John Doe 7pm-8pm (changes to that name when its 7pm-8pm)

I used http://www.venivortex.com/open-source/jquery-rotator.php but it does not work. Does anyone know something like this?

Any help is appreciated!

+3
source share
2 answers

Something like this should be a good start for you:

$(function(){

    $('#timeperiod1').mood({
        range: [1, 7] // hours
    });
    $('#timeperiod2').mood({
        range: [7, 12] // hours
    });
    $('#timeperiod3').mood({
        range: [12, 24]  // hours
    });
});

// the jquery plugin
// TODO: add end of day re init
//       add min/sec along with hours
$.fn.mood = (function(){
    var Mood = function(el, opts){
        this.el = $(el);

        this.range = { bottom: opts.range[0]*1, top: opts.range[1]*1 };
        this.init();
    };
    Mood.prototype = {
        init: function(){
            this.initTime = this.checkTime(); // 1, 0, -1

            this.initTime == 0 ? this.show() : this.hide();
            this.start();
        },
        start: function(){
            var t = new Date(), 
                showDate = new Date(t), 
                hideDate = new Date(t), 
                h = t.getHours(), hide = false, show = false;

            if(this.initTime < 0) {// time has not yet come
                showDate.setHours(this.range.bottom);
                showDate.setMinutes(0);
                show = true;

            }
            if(this.initTime <= 0){
                hideDate.setHours(this.range.top);
                hideDate.setMinutes(0);
                hide = true;
            }
            debugger;
            show && setTimeout($.proxy(this.show, this), Math.ceil(showDate.getTime()-t.getTime()));
            hide && setTimeout($.proxy(this.hide, this), Math.ceil(hideDate.getTime()-t.getTime()));
        },

        checkTime: function(){
            var t = new Date(), h = t.getHours();
            if(h >= this.range.bottom && h <= this.range.top)
                return 0;
            if(h < this.range.bottom)
                return -1;  
            if(h > this.range.top)
                return 1;  
        },
        show: function(){
            this.el.show('slow');
        },
        hide: function(){
            this.el.hide('slow');
        }

    };

    return function(opts){
        return this.data('rotateMood', new Mood(this, opts));    
    };
})();
+2
source

very short

//initialize date object
var d = new Date();
var currentHour = d.getHours(); //note 0-23

if (currentHour < 6) 
 { 
     $('div').append('Before 6am');
  }
else if (currentHour == 7)
{
   $('div').append('7am');
}
else {
   $('div').append('Time Now' + d.getHours() + ':' + d.getMinutes()); 
  }

live example: http://jsfiddle.net/9dUJ6/

expand with else if

getDate() ( 1-31)
    getDay() ( 0 6)
    getFullYear() ( )
    getHours() ( 0 23)
    getMilliseconds() ( 0 99)
    getMinutes() ( 0 59)
    getMonth() ( 0-11)
    getSeconds() ( 0 59)
    getTime() 1 , 1970
    getTimezoneOffset() GMT ,

    getUTCDate() , ( 1-31)
    getUTCDay() , ( 0 6)
    getUTCFullYear() , ( )
    getUTCHours() , ( 0-23)
    getUTCMilliseconds() , ( 0 999)
    getUTCMinutes() , ( 0 59)
    getUTCMonth() , ( 0-11)
    getUTCSeconds() , ( 0 59)
    getYear() . getFullYear()     parse() 1 1970     setDate() ( 1-31)
    setFullYear() ( )
    setHours() ( 0 23)
    setMilliseconds() ( 0 999)
    setMinutes() ( 0 59)
    setMonth() ( 0-11)
    setSeconds() ( 0 59)
    setTime() / 1 1970 .
    setUTCDate() , ( 1-31)
    setUTCFullYear() , ( )
    setUTCHours() , ( 0-23)
    setUTCMilliseconds() , ( 0 999)
    setUTCMinutes() ( 0-59)
    setUTCMonth() , ( 0-11)
    setUTCSeconds() , ( 0-59)
    setYear() . setFullYear()     toDateString() Date
    toGMTString() . toUTCString()     toLocaleDateString() Date ,     toLocaleTimeString() Date ,     toLocaleString() Date ,
    toString() Date
    toTimeString() Date
    toUTCString() Date ,
    UTC() 1 1970 ,
    valueOf() Datei

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date

w3schools http://www.w3schools.com/jsref/jsref_obj_date.asp

+4

More articles:


All Articles