时间戳

首页 > 解决方案 > Javascript：理解如何根据时间显示图像的问题（new Date()、getHours()、getMinutes()）

javascript - Javascript：理解如何根据时间显示图像的问题（new Date()、getHours()、getMinutes()）

问题描述

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

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

目的是它像一个更有限的时钟一样运行......所以某种“太阳”或“月亮”应该总是可见的。

（为了清楚起见，每个图像的间隔是这样的：

     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

标签： javascriptimagewallpaper

解决方案

一般来说，对于这种系列，您可以做以下两件事之一：

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

您可以对数据使用其中任何一种，但键有点棘手，因为您的时间间隔不规则，而且您在下午 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;
}

推荐阅读