javascript – 根据季节(春季,夏季,秋季,冬季)更改CSS中的背景图片

我有一个特定日期的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>
最佳答案
通过使用DOM,您可以以(样本图像链接)方式更改图像背景,并且您必须进一步设置它以适合您的部分:

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

我通过使用getElementsByClassName访问了该部分,但我建议你为此部分分配一个id,如果这是使用DOM专门指向此部分而不是使用getElementsByClassName的部分,因为它返回对象,尽管只有一个类.
对于区分季节的方法,我更喜欢使用date()中的getMonth(),其中:

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

并且您可以以间隔方式设置倒计时功能,例如setInterval()

看看getMonth()setInterval()功能.

转载注明原文:javascript – 根据季节(春季,夏季,秋季,冬季)更改CSS中的背景图片 - 代码日志