Question

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

感谢任何帮助！

Answer 1

非常简洁

//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月1日午夜以来的毫秒数，   1970年
      getTimezoneOffset（）返回GMT和local之间的时差   时间，以分钟为单位       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为单位返回Date对象的日期部分   字符串，使用语言环境约定
      toLocaleTimeString（）以Date为单位返回Date对象的时间部分   字符串，使用语言环境约定
      toLocaleString（）使用locale将Date对象转换为字符串   公约
      toString（）将Date对象转换为字符串
      toTimeString（）将Date对象的时间部分转换为   串
      toUTCString（）根据。将Date对象转换为字符串   世界时间
      UTC（）返回日期字符串中的毫秒数   据1970年1月1日午夜报道   通用时间
      valueOf（）返回Date objecti

的原始值

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

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

Answer 2

像this之类的东西应该是一个很好的开始：

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

如何按时间更改div内容？

2 个答案: