Как изменить содержание div по времени суток?
Я хочу иметь возможность изменять содержимое определенного 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 ответа
Примерно так должно быть хорошим началом для вас:
$(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));
};
})();
Очень кратко
//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/
расширить с остальным, если
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