Javascript:理解如何根据时间显示图像的问题(new Date()、getHours()、getMinutes())

Question

我正在使用适当命名的壁纸引擎构建交互式“网络壁纸”。这是一个自二月初以来一直在进行的项目——虽然我对此完全陌生，但我已经完成了很多工作!感谢这个网站解答的问题、W3Schools 和无数的 YouTube 教程。 。但我碰壁了(……纸？)。

我目前面临的问题是对“Date()”、“getHours”、“getMinutes”方法明显缺乏理解。在下面的代码中，我尝试表达我希望图像源根据一天中的时间更改为不同的源。但它无法运行，因为图像不显示任何内容。

其目的是让它像一个更有限的时钟一样运行..因此某种“太阳”或“月亮”应该始终可见。

(需要明确的是，每个图像的间隔如下:

• 上午 9 点 - 下午 1:59 = www.morningsun.png
• 下午 2 点 - 下午 4:59 = www.restingsun.png
• 下午 5 点 - 下午 5:30 = www.afternoon.png
• 下午 5:30 - 下午 5:59 = www.daybreak.png
• 下午 6 点 - 晚上 8:59 = www.fullmoon.png
• 晚上 9 点 - 凌晨 12:59 = www.darkhour.png
• 凌晨 1 点 - 凌晨 4:59 = www.restingmoon.png
• 上午 5 点 - 上午 8:59 = www.waningmoonlight.png
• 重复)

     function showcaseTIME() {
     var currentTIME = new Date();
     var hoursNOW = currentTIME.getHours();
     var minutesNOW = currentTIME.getMinutes();

      if ((9 <= hoursNOW && minutesNOW <= 00) || (hoursNOW < 13 && 59 < minutesNOW)) 

      {document.write('<img id="Solunar"' + 'src="' + '"core folder/www.morningsun"' + '">');
     } 


      if ((14 <= hoursNOW && minutesNOW <= 00) || (hoursNOW < 16 &&  59 < minutesNOW)) 

      {document.write('<img id="Solunar"' + 'src=' + '"core folder/www.restingsun.png"' + '">');
    }  


      if ((17 <= hoursNOW && minutesNOW <= 00) || (hoursNOW < 17 && 30 < minutesNOW)) 

      {document.write('<img id="Solunar"' + 'src=' + '"core folder/www.afternoon.png"' + '">');
    }


      if ((17 <= hoursNOW && minutesNOW <= 31) || (hoursNOW < 18 && 59 < minutesNOW)) 

      {document.write('<img id="Solunar"' + 'src=' + '"core folder/www.daybreak.png"' + '">');
    }


      if ((18 <= hoursNOW && minutesNOW <= 00) || (hoursNOW < 20 && 59 < minutesNOW)) 

      {document.write('<img id="Solunar"' + 'src=' + '"core folder/www.fullmoon.png"' + '">');
    }


      if ((21 <= hoursNOW && minutesNOW <= 00) || ( hoursNOW < 0 && 59 < minutesNOW)) 

      {document.write('<img id="Solunar"' + 'src=' + '"core folder/www.darkhour.png"' + '">');
    }  


      if ((1 <= hoursNOW && minutesNOW <= 00) || (hoursNOW < 4 && 59 < minutesNOW)) 

      {document.write('<img id="Solunar"' + 'src=' + '"core folder/www.restingmoon.png"' + '">');
    }


      if ((5 <= hoursNOW && minutesNOW <= 00) || (hoursNOW < 8 && 59 < minutesNOW)) 
      {document.write('<img id="Solunar"' + 'src=' + '"core folder/www.waningmoonlight.png"' + '">');
    }


   }

// Thank you for any that have read this! In the meantime, I'll continue working at it all and seeing what can be found

Answer 1

一般来说，对于此类系列，您需要执行以下两项操作之一:

1. 如果您可以将数据转换为每个图像的唯一键，则可以创建该键到所需图像的映射。
2. 如果是范围，可以按顺序排列并使用if/else if/else if

您可以将其中任何一个与您的数据一起使用，但 key 有点棘手，因为您的间隔不规则，并且下午 5 点左右有一个特殊情况。这是范围方法:

var img;
if (hours >= 21 || hours < 1) {
    // 9 PM - 12:59 AM = www.darkhour.png
    img = "www.darkhour.png";
} else if (hours < 5) {
    // 1 AM - 4:59 AM = www.restingmoon.png
    img = "www.restingmoon.png";
} else if (hours < 9) {
    // 5 AM - 8:59 AM = www.waningmoonlight.png
    img = "www.waningmoonlight.png";
} else if (hours < 14) {
    // 9 AM - 1:59 PM = www.morningsun.png
    img = "www.morningsun.png";
} else if (hours < 17) {
    // 2 PM - 4:59 PM = www.restingsun.png
    img = "www.restingsun.png";
} else if (hours === 17 && minutes < 30) {
    // 5 PM - 5:30 PM = www.afternoon.png
    img = "www.afternoon.png";
} else if (hours === 17) {
    // 5:30 PM - 5:59 PM = www.daybreak.png
    img = "www.daybreak.png";
} else {
    // 6 PM - 8:59 PM = www.fullmoon.png
    img = "www.fullmoon.png";
}
// ...use `img` here

实例:

var dt = new Date(2020, 0, 1);
for (var n = 0; n < 48; ++n) {
    dt.setMinutes(dt.getMinutes() + 30);
    example(dt);
}

function example(dt) {
    var hours = dt.getHours();
    var minutes = dt.getMinutes();
    var img;
    if (hours >= 21 || hours < 1) {
        // 9 PM - 12:59 AM = www.darkhour.png
        img = "www.darkhour.png";
    } else if (hours < 5) {
        // 1 AM - 4:59 AM = www.restingmoon.png
        img = "www.restingmoon.png";
    } else if (hours < 9) {
        // 5 AM - 8:59 AM = www.waningmoonlight.png
        img = "www.waningmoonlight.png";
    } else if (hours < 14) {
        // 9 AM - 1:59 PM = www.morningsun.png
        img = "www.morningsun.png";
    } else if (hours < 17) {
        // 2 PM - 4:59 PM = www.restingsun.png
        img = "www.restingsun.png";
    } else if (hours === 17 && minutes < 30) {
        // 5 PM - 5:30 PM = www.afternoon.png
        img = "www.afternoon.png";
    } else if (hours === 17) {
        // 5:30 PM - 5:59 PM = www.daybreak.png
        img = "www.daybreak.png";
    } else {
        // 6 PM - 8:59 PM = www.fullmoon.png
        img = "www.fullmoon.png";
    }
    console.log("hours = " + hours + ", minutes = " + minutes + ", img = " + img);
}

.as-console-wrapper {
    max-height: 100% !important;
}