как изменить содержание div по времени суток? - PullRequest
Новая
       7

как изменить содержание div по времени суток?

3 голосов
/ 08 июня 2011

Я хочу иметь возможность изменять содержимое определенного div в зависимости от времени пользователя. Например, если это 5 утра, определенный контент будет отображаться. Если это 6 утра, другой контент показывает. 

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)

Я использовал http://www.venivortex.com/open-source/jquery-rotator.php, но это не работает. Кто-нибудь знает что-то подобное?

Любая помощь приветствуется!

Ответы [ 2 ]

4 голосов
/ 08 июня 2011

очень кратко 

//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()); 
  }

живой пример: http://jsfiddle.net/9dUJ6/

расширить с помощью else, если

getDate () Возвращает день месяц (с 1-31)
getDay () Возвращает день недели (от 0 до 6)
getFullYear () Возвращает год (четыре цифры)
getHours () Возвращает час (от 0 до 23)
getMilliseconds () Возвращает миллисекунды (от 0 до 999)
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 () Возвращает примитивное значение объекта Date

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date и обзор объекта даты

как и w3schools http://www.w3schools.com/jsref/jsref_obj_date.asp

2 голосов
/ 08 июня 2011

Что-то вроде это должно быть хорошим началом для вас: 

$(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));    
    };
})();
...