根据季节（春、夏、秋、冬）更改 CSS 中 <section> 的背景图像

Question

我有一个特定日期的 javascript 倒计时，我想根据现在的季节（春季、夏季、秋季、冬季）更改某个部分的背景图像

4 季时间线： 春季（三月至五月） 夏季（六月至八月） 秋季（9 月至 11 月） 冬季（12 月至 2 月）

我会在我的脚本代码中声明一个具体的日期，它的倒计时在 2020 年 10 月 15 日结束，我还想不出任何逻辑，所以我寻求帮助:) 谢谢！

这是我的 javascript 代码：

function dateCountdown() {
    const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

    //set the timer here
    let countDown = new Date('Oct 15, 2020 00:00:00').getTime(),
        x = setInterval(function () {

            let now = new Date().getTime(),
                distance = countDown - now;

            document.getElementById('days').innerText = Math.floor(distance / (day)),
                document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
                document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
                document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);

            //do something later when date is reached
            //if (distance < 0) {
            //  clearInterval(x);
            //  'IT'S TIME!;
            //}

        }, second)
}

这里是 HTML 代码：

      <section class="section-countdown">
        <h2>THIS CONGRESS BEGINS IN</h2>
        <ul class="countdown">
            <li>
              <span id="days"></span>
              <p class="days_ref">DAYS</p>
            </li>
            <li class="seperator">:</li>
            <li>
              <span id="hours"></span>
              <p class="hours_ref">HOURS</p>
            </li>
            <li class="seperator">:</li>
            <li>
              <span id="minutes"></span>
              <p class="minutes_ref">MINUTES</p>
            </li>
            <li class="seperator">:</li>
            <li>
              <span id="seconds"></span>
              <p class="seconds_ref">SECONDS</p>
            </li>
        </ul>
      </section>

Answer 1

您可以尝试以下方法来获取季节：

function getSeason() {
  var currentMonth = new Date().getMonth() + 1;
  if (currentMonth === 12 || currentMonth === 1 || currentMonth === 2)
    return "winter";
  else if (currentMonth >= 3 && currentMonth <= 5)
    return "spring";
  else if (currentMonth >= 6 && currentMonth <= 8)
    return "summer";
  else if (currentMonth >= 9 && currentMonth <= 11)
    return "fall";
  return ""
}

然后创建一个如下的函数来为你想要的元素设置背景图片：

function setBackground() {
  var image = "";
  switch (getSeason()) {
    case "winter":
      image = imageurlhere;
      break;
    case "spring":
      image = imageurlhere;
      break;
    case "summer":
      image = imageurlhere;
      break;
    case "fall":
      image = imageurlhere;
      break;
    default:
      break;
  }
  document.getElementByClassName("section-countdown").style.backgroundImage = 'url(image)';
}

编辑：我的错误 getMonth() 是从零开始的，我已经在上面进行了更改。

Answer 2

通过使用 DOM，您可以更改图像背景（示例图像链接），并且您必须进一步设置样式以适合您的部分：

document.getElementsByClassName("section-countdown")[0].style.backgroundImage = 'url("https://i.ytimg.com/vi/6Ir9FSUsaLA/maxresdefault.jpg")';

我使用 getElementsByClassName 访问了该部分，但如果这是唯一使用 DOM 来指向的部分，我建议您为此部分分配一个 id本节不使用getElementsByClassName，因为它返回对象，尽管只有一个类。
对于区分季节的方法，我更喜欢使用getMonth() from date() 其中：

var d = new Date();
var month = d.getMonth();
if(month < 3){
//spring
}else if(month > 2 && month < 6){
//summer
}.....

您可以通过间隔方式设置倒计时功能，例如setInterval()
看看getMonth() 和setInterval() 函数。