Question

我将javascript倒计时到特定日期，并且我想更改某个部分的背景图片，具体取决于它是哪个季节（春季，夏季，秋季，冬季）

4个季节的时间表：春季（3月至5月）夏季（6月至8月）秋天（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指向 point 的部分，我建议您为此部分分配一个 id 专门针对本节，而不是使用getElementsByClassName，因为它只有一个类，但它返回对象。
对于区分季节的方法，我更喜欢从getMonth()中使用date()：

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

您还可以按 interval （间隔）的方式设置倒计时功能，例如setInterval()
看一下getMonth()和setInterval()函数。

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

2 个答案: