基于日期显示内容的 Jquery 或 Javascript 帮助
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4319135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery or Javascript that display content based on the date HELP
提问by leave1
Jquery or JavaScript that displays content based on specifics date period
根据特定日期时间段显示内容的 Jquery 或 JavaScript
so we have like 3 dates
12/3/2010
12/11/2010
12/20/2010
所以我们有 3 个日期
12/3/2010
12/11/2010
12/20/2010
and
Div Contents
和
Div 内容
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
内容 1 应在 12/3 至 12/11 显示
内容 2 应在 12/11 至 12/20 显示
，内容 3 应在 12/20 显示之后
回答by Shadow Wizard is Ear For You
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.
不管怎样，猜你有你的理由，所以这里是 jQuery 解决方案。
Have such HTML:
有这样的 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".
使用类“DateRange”将日期范围放在每个 div 内的跨度内。
Next, have such CSS to have them initially hidden:
接下来，让这样的 CSS 使它们最初隐藏：
<style type="text/css">
.DateRange, .DateDiv { display: none; }
</style>
And finally, this script: (jQuery)
最后，这个脚本：（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/
测试用例可以在这里随意使用：http: //jsfiddle.net/2BHLd/
回答by rhino
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 中没有 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>
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.
请注意，如果您想在指定日期尚未到来的情况下对用户隐藏某些数据，出于安全原因，您最好使用服务器端的东西。否则，任何用户都可能只是阅读页面的源代码。还请记住，以下代码是在加载正文时执行的，即每次用户刷新页面时。
编辑：警告：有两条坏线（我以前犯过错误）。无论如何，我已经修复了它们。当前代码有效，我已经测试过了。
