使用JavaScript每两周自动切换一次内容(已解决!)

时间:2019-03-20 20:07:21

标签: javascript schedule

编辑:我最终找到了解决方案,以防有人发现它有用。简短的版本是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). "; 
}

0 个答案:

没有答案