Jquery or Javascript that display content based on the date HELP_问答_开发者

Jquery or Javascript that display content based on the date HELP

开发者 https://www.devze.com 2023-01-27 12:31 出处：网络

Jquery or JavaScriptthat displays content based on specifics date period so we have like 3 dates 12/3/2010

Jquery or JavaScript that displays content based on specifics date period

so we have like 3 dates

12/3/2010

12/11/2010

12/20/2010

and

Div Contents

Content 1 should be displaying from 12/3 to 12/11

Content 2 should be display from 12/11 to 开发者_如何学编程12/20

and Content 3 should be displaying from 12/20 there after

First, like others said this whole thing is bad idea as you're depending on the client machine date/time and correct approach would be doing that in server side.

Anyway, guess you have your reasons so here is jQuery solution.

Have such HTML:

<div class="DateDiv"><span class="DateRange">1/1/2010 to 1/1/2011</span>I'll be visible during 2010</div>
<div class="DateDiv"><span class="DateRange">1/1/2011 to 1/1/2012</span>I'll be visible during 2011</div>
<div class="DateDiv"><span class="DateRange">1/1/2012 to 1/1/2013</span>I'll be visible during 2012</div>

Put the date range inside a span inside each div with the class "DateRange".

Next, have such CSS to have them initially hidden:

<style type="text/css">
  .DateRange, .DateDiv { display: none; }
</style>

And finally, this script: (jQuery)

<script type="text/JavaScript">
$(function() {
    $(".DateDiv").each(function(index) {
        var sRange = $(this).find(".DateRange").html();
        var arrTemp = sRange.split(" to ");
        var dtFrom = new Date(arrTemp[0]);
        var dtTo = new Date(arrTemp[1]);
        var dtNow = new Date();
        if (dtNow >= dtFrom && dtNow <= dtTo)
            $(this).show();
    });
});
</script>

Test case is available here feel free to mess around with it: http://jsfiddle.net/2BHLd/

I've created a simple code. It should work as you want (if I have understood you well).
I know, there's no doctype in my HTML and there are some missing tags. The HTML I've provided is just a kind of template.

<html>
<head>
<script type="text/javascript">
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth();
var day=date.getDate(); // fixed
function SetDivContent() {
    var div=document.getElementById('date_dependent');
    if (year==2010 && month==11) { // fixed (the JavaScript months order is 0-11, not 1-12)
        if (day>=3 && day<11) { // the following content will be displayed 12/03/2010, 12/04/2010, [...], 12/09/2010, 12/10/2010
            div.innerHTML='content 1';
        }
        else if (day==11 || day==12) { // this one will be displayed 12/11/2010 and 12/12/2010
            div.innerHTML='content 2';
        }
        else if (day>12) { // this one - 12/13/2010 and later, until the end of December
            div.innerHTML='content 3';
        }
    }
    else if (year==2011 && month>=0) div.innerHTML='content 3'; // OPTIONAL - just to ensure that content 3 is displayed even after December.
}
</script>
</head>
<body onload="SetDivContent()">
<div id="date_dependent"></div>
</body>
</html>

Please note that if you want to hide some data from users if the specified date hasn't come yet, you should better use something server-side for security reasons. Otherwise, any user may just read the page's source. Also remember that the following code is executed when the body is loaded, i.e. each time a user refreshes the page.
EDIT: Warning: there were two bad lines (I've made a mistake before). Anyway, I've fixed them. The current code works, I've tested it.