如何按一天中的时间更改 div 内容?

发布于 2024-11-14 06:36:52 字数 509 浏览 2 评论 0原文

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

任何帮助表示赞赏!

I want to be able to change the content of a certain div according to the time of the user.
For example, if it's 5am, certain content would show. If it's 6am, another content shows.

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 was using http://www.venivortex.com/open-source/jquery-rotator.php but it doesn't work. Anyone know of something similar?

Any help is appreciated!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

半世蒼涼 2024-11-21 06:36:52

非常简洁

//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() 返回自 1 月 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() 解析日期字符串并返回毫秒数
自 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() 将日期对象转换为字符串
toTimeString() 将 Date 对象的时间部分转换为
字符串
toUTCString() 将 Date 对象转换为字符串,根据
世界时间
UTC() 返回日期字符串自 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

very tersely

//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() Returns the day of the
month (from 1-31)
getDay() Returns the day of the week (from 0-6)
getFullYear() Returns the year (four digits)
getHours() Returns the hour (from 0-23)
getMilliseconds() Returns the milliseconds (from 0-999)
getMinutes() Returns the minutes (from 0-59)
getMonth() Returns the month (from 0-11)
getSeconds() Returns the seconds (from 0-59)
getTime() Returns the number of milliseconds since midnight Jan 1,
1970
getTimezoneOffset() Returns the time difference between GMT and local
time, in minutes
getUTCDate() Returns the day of the month, according to universal time
(from 1-31)
getUTCDay() Returns the day of the week, according to universal time
(from 0-6)
getUTCFullYear() Returns the year, according to universal time
(four digits)
getUTCHours() Returns the hour, according to universal time (from
0-23)
getUTCMilliseconds() Returns the milliseconds, according to
universal time (from 0-999)
getUTCMinutes() Returns the minutes, according to universal time
(from 0-59)
getUTCMonth() Returns the month, according to universal time (from
0-11)
getUTCSeconds() Returns the seconds, according to universal time
(from 0-59)
getYear() Deprecated. Use the getFullYear() method instead
parse() Parses a date string and returns the number of milliseconds
since midnight of January 1, 1970
setDate() Sets the day of the month (from 1-31)
setFullYear() Sets the year (four digits)
setHours() Sets the hour (from 0-23)
setMilliseconds() Sets the milliseconds (from 0-999)
setMinutes() Set the minutes (from 0-59)
setMonth() Sets the month (from 0-11)
setSeconds() Sets the seconds (from 0-59)
setTime() Sets a date and time by adding or subtracting a specified
number of milliseconds to/from
midnight January 1, 1970
setUTCDate() Sets the day of the month, according to universal time
(from 1-31)
setUTCFullYear() Sets the year, according to universal time (four
digits)
setUTCHours() Sets the hour, according to universal time (from
0-23)
setUTCMilliseconds() Sets the milliseconds, according to universal
time (from 0-999)
setUTCMinutes() Set the minutes, according to universal time (from
0-59)
setUTCMonth() Sets the month, according to universal time (from
0-11)
setUTCSeconds() Set the seconds, according to universal time (from
0-59)
setYear() Deprecated. Use the setFullYear() method instead
toDateString() Converts the date portion of a Date object into a
readable string
toGMTString() Deprecated. Use the toUTCString() method instead
toLocaleDateString() Returns the date portion of a Date object as a
string, using locale conventions
toLocaleTimeString() Returns the time portion of a Date object as a
string, using locale conventions
toLocaleString() Converts a Date object to a string, using locale
conventions
toString() Converts a Date object to a string
toTimeString() Converts the time portion of a Date object to a
string
toUTCString() Converts a Date object to a string, according to
universal time
UTC() Returns the number of milliseconds in a date string since
midnight of January 1, 1970, according
to universal time
valueOf() Returns the primitive value of a Date objecti

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date provides and overview of the date object

so too does w3schools
http://www.w3schools.com/jsref/jsref_obj_date.asp

So要识趣 2024-11-21 06:36:52

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

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));    
    };
})();
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文