编辑:我最终找到了解决方案,以防有人发现它有用。简短的版本是JavaScript日期很难使用。
原始帖子:
我正在制作一个网页,计算该网页是否在每周回收一次,如果是,则计划安排在哪个社区取车。
此演示使用以前计划的回收周的第一天作为标界日期,并从该日期开始以14天为增量。每第14天代表新的回收周的开始。显示的消息会根据一天中的时间和星期几而变化。
我遇到的问题是,下一个回收周的开始日期每天都会有几个小时不正确。我认为这是时区问题,但是在标界日期上设置时区会产生相同的结果。
最后,我最终在分界日期上更改了日期格式,并且它起作用了。
我从这里...
var demarcationdate = new Date("2017-03-13");
...对此...
var demarcationdate= new Date("2017-03-13").toLocaleString("en-US", {timeZone: "America/New_York"});
...对此,终于奏效了。
var demarcationdate = new Date("March 13, 2017 00:00:00");
以下是CodePen上的演示链接:https://codepen.io/mikejandreau/pen/MxZmZq
HTML:
<header class="masthead" id="map">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12 text-center text-white">
<h1 class="display-4 mb-4">
<span id="greeting" class="greeting"></span>
</h1>
<p class="lead">
<span id="todaysDate"></span>
<span id="neighborhood"></span>
<span id="futureDate"></span>
</p>
<p>
<span id="followingWeek"></span>
</p>
</div>
</div>
</div>
</header>
CSS(不是很重要,但是无论如何还是这样):
#map {
height: 100%;
height: 100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
JS:
// greeting based on time of day
var thehours = new Date().getHours();
var greeting = document.getElementById('greeting');
var themessage;
var morning = ('Good morning!');
var afternoon = ('Good afternoon!');
var evening = ('Good evening!');
if (thehours >= 0 && thehours < 12) {
themessage = morning;
} else if (thehours >= 12 && thehours < 17) {
themessage = afternoon;
} else if (thehours >= 17 && thehours < 24) {
themessage = evening;
}
greeting.innerHTML= themessage; // show greeting, always on
// neighborhood for day of week
var scheduleCurrentDate = new Date();
var scheduleAllDays = [
{
day: "Sunday",
neighborhood: "recycling pickup is scheduled for the <strong>Fairmount Neighborhood</strong>",
image:
"https://via.placeholder.com/450x800/555555/666666/?text=Sunday+Image"
},
{
day: "Monday",
neighborhood: "recycling pickup is scheduled for the <strong>West Market Neighborhood</strong>",
image:
"https://via.placeholder.com/450x800/555555/666666/?text=Monday+Image"
},
{
day: "Tuesday",
neighborhood: "recycling pickup is scheduled for the <strong>Union Street Neighborhood</strong>",
image:
"https://via.placeholder.com/450x800/555555/666666/?text=Tuesday+Image"
},
{
day: "Wednesday",
neighborhood: "recycling pickup is scheduled for the <strong>Broadway and State Street Neighborhoods</strong>",
image:
"https://via.placeholder.com/450x800/555555/666666/?text=Wednesday+Image"
},
{
day: "Thursday",
neighborhood: "recycling pickup is scheduled for the <strong>Downtown Neighborhood</strong>",
image:
"https://via.placeholder.com/450x800/555555/666666/?text=Thursday+Image"
},
{
day: "Friday",
neighborhood: "recycling pickup is scheduled for the <strong>East Hills Neighborhood</strong>",
image:
"https://via.placeholder.com/1920x1080/555555/666666/?text=Friday+Image"
},
{
day: "Saturday",
neighborhood: "recycling pickup is scheduled for the <strong>Kenduskeag Neighborhood</strong>",
image:
"https://via.placeholder.com/450x800/555555/666666/?text=Saturday+Image"
}
];
// document.getElementById("day").innerHTML = scheduleAllDays[scheduleCurrentDate.getDay()].day;
// document.getElementById("neighborhood").innerHTML = scheduleAllDays[scheduleCurrentDate.getDay()].neighborhood + " (excluding holidays). ";
document.getElementById("map").style.background =
"url('" + scheduleAllDays[scheduleCurrentDate.getDay()].image + "') no-repeat center"; // show background image, based on day of the week
// calculate bi-weekly schedule
function treatAsUTC(date) {
var result = new Date(date);
result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
return result;
}
function daysBetween(startDate, endDate) {
var millisecondsPerDay = 24 * 60 * 60 * 1000;
return Math.floor((treatAsUTC(endDate) - treatAsUTC(startDate)) / millisecondsPerDay);
}
// start date based on most recently scheduled recycling week
var demarcationdate = new Date("March 13, 2017 00:00:00"); // start date based on previously scheduled recycling week
showTodaysDate = document.getElementById('todaysDate'),
showNeighborhood = document.getElementById('neighborhood'),
showFutureDate = document.getElementById('futureDate'),
nextWeekBegins = document.getElementById('followingWeek'),
monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
today = new Date(),
days = daysBetween(demarcationdate,today),
daystill = 14 - days%14,
rec = days%14==0,
d = new Date();
// add remaining days to current date to get next recycling week start date
d.setDate(today.getDate() + daystill);
// format dates to make them easy to read
var currentDate = (dayNames[today.getDay()] + ", " + monthNames[today.getMonth()] + " " + today.getDate() + ", " + today.getFullYear());
var nextDate = (monthNames[d.getMonth()] + " " + d.getDate());
// show current date, always on
showTodaysDate.innerHTML="Today is "+currentDate.toString()+", and ";
// show start date of next recycling week and days remaining, always on
nextWeekBegins.innerHTML="The next recycling week begins " + dayNames[d.getDay()] + ", " + nextDate.toString() + " ("+daystill+" days from now)."
// Conditional display rules
var date1 = new Date(today); // today's date
var date2 = new Date(d); // day next recycling week starts
var timeDiff = Math.abs(date2.getTime() - date1.getTime()); // caluclate time between two dates
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); // convert that time to days
if (diffDays <= 7) {
// if (rec === true) { // ignore this, it's just to test 'showNeighborhood'
// if it is not a recycling week, show the start date of the following recycling week
showFutureDate.innerHTML="there is <strong>no recycling pickup</strong> scheduled this week.";
} else {
// if it is a recycling week, show scheduled neighborhood
showNeighborhood.innerHTML = scheduleAllDays[scheduleCurrentDate.getDay()].neighborhood + " (excluding holidays). ";
}