jQuery的或JavaScript,基于细节显示内容显示内容日期期间的Jquery或Javascript,基于最新帮助
所以我们有像3个日期
12/3/2010
12/11/2010
12/20/2010
和
股利内容
内容1应当从12/3被显示到12/11
内容2应显示从12/11到12/20
和内容3应显示从12/20后
jQuery的或JavaScript,基于细节显示内容显示内容日期期间的Jquery或Javascript,基于最新帮助
所以我们有像3个日期
12/3/2010
12/11/2010
12/20/2010
和
股利内容
内容1应当从12/3被显示到12/11
内容2应显示从12/11到12/20
和内容3应显示从12/20后
我创建了一个简单的代码。它应该像你想要的那样工作(如果我已经很好地理解了你的话)。
我知道,我的HTML中没有文档类型,并且有一些缺少标签。我提供的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>
请注意,如果你想向用户隐藏一些数据,如果在指定的日期还没来,你最好使用一些服务器端出于安全原因。否则,任何用户都可能只是阅读该页面的源代码。另外请记住,在加载正文时,即每次用户刷新页面时,都会执行以下代码。
编辑:警告:有两个坏行(我犯了一个错误之前)。无论如何,我修复了它们。当前的代码有效,我测试过了。
首先,像其他人一样,说这整个事情是坏主意,因为你取决于客户端机器日期/时间和正确的方法将在服务器端做到这一点。
无论如何,猜你有你的理由,所以这里是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>
把日期范围跨度内与类“日期范围”每个DIV中。
下,有这样的CSS让它们最初是隐藏的:
<style type="text/css">
.DateRange, .DateDiv { display: none; }
</style>
最后,这个脚本:(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>
测试用例可以在这里到处乱随时与它:http://jsfiddle.net/2BHLd/
您的数据是?你从服务器获取它作为JSON还是它的一部分(即表)?我想你的数据有一个日期部分... – 2010-11-30 22:05:11
数据将被硬编码在divs中 – leave1 2010-11-30 22:09:46