基于日期帮助显示内容的Jquery或Javascript_Javascript_Jquery

基于日期帮助显示内容的Jquery或Javascript

javascript jquery

基于日期帮助显示内容的Jquery或Javascript,javascript,jquery,Javascript,Jquery,Jquery或JavaScript，基于特定日期段显示内容所以我们有3次约会 2010年12月3日 2010年11月12日 2010年12月20日和 Div目录内容1应在12/3至12/11期间显示内容2应在11月12日至20月12日期间显示在我创建了一个简单的代码之后，内容3应该从12/20开始显示。如果我对你很了解的话，它应该可以发挥你想要的作用。我知道，我的HTML中没有doctype，并且缺少一些标记。我提供的HTML只是一种模板 <html> <head&

Jquery或JavaScript，基于特定日期段显示内容

所以我们有3次约会
2010年12月3日
2010年11月12日
2010年12月20日

和
Div目录

内容1应在12/3至12/11期间显示
内容2应在11月12日至20月12日期间显示

在我创建了一个简单的代码之后，内容3应该从12/20开始显示。如果我对你很了解的话，它应该可以发挥你想要的作用。
我知道，我的HTML中没有doctype，并且缺少一些标记。我提供的HTML只是一种模板

<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>


变量日期=新日期（）；
var year=date.getFullYear（）；
var month=date.getMonth（）；
var day=date.getDate（）；//固定的
函数SetDivContent（）{
var div=document.getElementById（'date_dependent'）；
if（year==2010&&month==11）{//已修复（JavaScript月份顺序为0-11，而不是1-12）
如果（第>=3天和第12天）{//这一天-2010年12月13日及以后，直到12月底
div.innerHTML='content 3'；
}
}
else if（year==2011&&month>=0）div.innerHTML='content 3'；//可选-确保即使在12月之后也显示content 3。
}

请注意，如果您想在指定日期尚未到来的情况下对用户隐藏某些数据，出于安全原因，您最好使用服务器端数据。否则，任何用户都可以读取页面的源代码。还要记住，在加载正文时，即每次用户刷新页面时，都会执行以下代码。

编辑：警告：有两行错误（我以前犯过一个错误）。不管怎样，我已经修好了。当前的代码可以工作，我已经测试过了。

首先，就像其他人说的那样，这整件事是个坏主意，因为您依赖于客户机的日期/时间，正确的方法是在服务器端这样做

不管怎样，我想你有你的理由，所以这里是jQuery解决方案

有这样的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>

2010年1月1日至2011年1月1日我将在2010年可见
2011年1月1日至2012年1月1日我将在2011年可见
2012年1月1日至2013年1月1日我将在2012年可见

将日期范围放在类为“DateRange”的每个div的范围内

接下来，使用这样的CSS使其最初隐藏：

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


.DateRange、.DateDiv{display:none；}

最后，这个脚本：（jQuery）


$（函数（）{
$（“.DateDiv”）。每个（函数（索引）{
var sRange=$（this.find（“.DateRange”）.html（）；
var arrTemp=范围拆分（“至”）；
var dtFrom=新日期（arrTemp[0]）；
var dtTo=新日期（arrTemp[1]）；
var dtNow=新日期（）；
如果（dtNow>=dtFrom&&dtNow）您的数据在哪里？您是从服务器以JSON的形式获取数据，还是它是某个元素（即表）的一部分？我想你的数据有一个日期部分…数据将被硬编码到存储日期的分区中？什么样的结构？这个问题太模糊，无法提供任何建设性的帮助。在JavaScript中这样做是一个非常糟糕的主意，你将任由PC时钟设置不正确的用户摆布。最好是我已经根据服务器的时钟设置了相应的div，而不是将所有三个都设置好，然后让JavaScript进行排序。谢谢，但我正在寻找隐藏/显示事件..并且内容首先隐藏在正文中…而不是执行InnerHtmlTanks。我正计划在InnerHTML中删除flash内容…我认为它可能不起作用..但是继续现在进行测试。我添加了一个新行，标记为“可选”。如果您希望内容3在2011年也能显示，您可以将其添加到代码中。我想编写如下内容：var now=new Date（）；var christma=new Date（“2010年12月25日”）；if（now>Christmas）//今天是圣诞节之后{//保存图像的div的id？$（'#div'）.show（）；}内容需要放在正文中，而不是脚本中。有什么想法吗？我们是否可以编写类似于当前的内容，但在InnerHTML中没有html部分？InnerHTML
有什么问题吗？除非你想与appendChild
和所有其他有趣的函数搏斗，否则我认为没有理由拒绝使用>innerHTML。。。
<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>