3

我希望能够根据用户的时间来改变某个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但它不起作用。有人知道类似的东西吗？

任何帮助表示赞赏！

4

2 回答 2

4

非常简洁

//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 if 展开

getDate() 返回月份中的第几天（从 1 到 31）
getDay() 返回星期几（从 0 到 6）
getFullYear() 返回年份（四位数字）
getHours() 返回小时（从 0 到23)
getMilliseconds() 返回毫秒（0-999）
getMinutes() 返回分钟（0-59）
getMonth() 返回月份（0-11）
getSeconds() 返回秒（0-59）
getTime() 返回自 1970 年 1 月 1 日午夜以来的毫秒数
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() 解析日期字符串并返回自 1970 年 1 月 1 日午夜以来的毫秒数
setDate() 设置月份中的日期（从 1 到 31）
setFullYear() 设置年份（四位数字）
setHours() 设置小时（0-23）
setMilliseconds() 设置毫秒（0-999）
setMinutes() 设置分钟（0-59）
setMonth() 设置月份（0-11）
setSeconds() 设置秒（从 0-59)
setTime() 通过在 1970 年 1 月 1 日午夜之间加上或减去指定的毫秒数来设置日期和时间
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() 返回日期中的毫秒数从 1970 年 1 月 1 日午夜开始的字符串，根据通用时间
valueOf() 返回 Date 对象的原始值

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date提供日期对象的概述

w3schools http://www.w3schools.com/jsref/jsref_obj_date.asp也是如此

于 2011-06-08T17:27:28.900 回答
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));    
    };
})();
于 2011-06-08T18:33:37.947 回答