Javascript: Issues understanding how to display Images based on time (new Date(), getHours(), getMinutes() )

Question

I am building an interactive "web wallpaper" using the aptly named Wallpaper Engine. It's been an on-going project since the beginning of February-- and while I'm completely new to this I have managed to get a lot done! This site's answered questions, W3Schools and countless YouTube tutorials are to thank. . but I've hit a wall (....paper?).

The current problem on my hand is the apparent lack of understanding in methods "Date()", "getHours", "getMinutes". In the below code, I try to express that I desire that the image source change to a different one depending on what time of day it is. But it fails to operate as the images don't display whatsoever.

The intent is that it performs like a more limited clock.. so some sort of "sun" or "moon" should always be visible.

(To be clear, the intervals for each image go like this:

9 AM - 1:59 PM = www.morningsun.png
2 PM - 4:59 PM = www.restingsun.png
5 PM - 5:30 PM = www.afternoon.png
5:30 PM - 5:59 PM = www.daybreak.png
6 PM - 8:59 PM = www.fullmoon.png
9 PM - 12:59 AM = www.darkhour.png
1 AM - 4:59 AM = www.restingmoon.png
5 AM - 8:59 AM = www.waningmoonlight.png
REPEAT)

     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

Somehow managed to copy my code two more times than I wanted to. . . I guess it is getting kind of late over here. Fixed though-- it's pleasant knowing that I'm at least beyond mistakes like those, hahaha — www, Feb 28 '20 at 07:38

T.J. Crowder · Answer 1 · 2020-02-28T08:21:22.200

In general with this kind of series, you do one of two things:

If you can turn your data into a unique key for each image, you can create a map of that key to the image you want.
If it's ranges, you can put them in order and use if/else if/else if

You could use either with your data, but keys are a bit trickier because your intervals aren't regular and you have a special case around 5p.m. Here's the ranges approach:

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

Live Example:

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;
}

The kindness needed to answer a call for help like this... gosh, I cannot thank you enough. Though, I applied your suggested code (with some altering to account for the correct file path and tuning to make sure that my variables are relevant) and couldn't manage to get anything to display. I'll link the code if I can in a moment but the comment interface is seemingly far different — www, Feb 28 '20 at 07:57
Tried to practice a little more careful-ness but still not quite getting there with the code linked. I think it is maybe because I'm misunderstanding the last comment "... use 'img' here" but am unsure — www, Feb 28 '20 at 08:15
Had no clue tags existed on this forum. Hope you didn't have to return to this page to see the messages and if so, you have my deepest apologies!! I'll apply this now! Would the as-console-wrapper be written within the — www, Feb 28 '20 at 08:33
@www - The `as-console-wrapper` thing is just for the Stack Snippet, you don't need it for your stuff. — T.J. Crowder, Feb 28 '20 at 08:46
Thank you for your insight! Weird that I still can't get this to work for me.. I really do wonder what it is. Tried reworking the file path in the way that you intended and all.. but will give it another look soon. — www, Feb 28 '20 at 09:00

score 0 · Answer 2 · answered Feb 28 '20 at 08:59

You need to model your solution accordingly. I'm attaching some code for your help. I'vent tested it and written here for your help only. You can make changes and use it.

const images = [ 
    {
        name: 'morningsun'
        imgPath: '',
        startsAt: 9
        lastTill: 14
    },
    {
        name: 'restingsun',
        imgPath: '',
        startsAt: 14
        lastTill: 17
    },
    {
        name: 'afternoon',
        imgPath: '',
        startsAt: 17
        lastTill: 18
    },
    {
        name: 'daybreak',
        imgPath: '',
        startsAt: 18
        lastTill: 19
    },
    {
        name: 'fullmoon',
        imgPath: '',
        startsAt: 19
        lastTill: 14
    },
    {
        name: 'darkhour',
        imgPath: '',
        startsAt: 14
        lastTill: 20
    },
    {
        name: 'restingmoon',
        imgPath: '',
        startsAt: 20
        lastTill: 21
    },
    {
        name: 'waningmoonlight',
        imgPath: '',
        startsAt: 21
        lastTill: 23
    }
]

function applyImg(index) {
    const imgPath = images[index].imgPath;
    const imgEle = document.getElementById('Solunar');
    if (!imgEle) {
        document.write(`<img id="Solunar" src="${imgPath}"/>`);
    } else {
        imgEle.src = imgPath;
    }

    const nextIndex = (index + 1) % images.length;
    const nextInterval = images[nextIndex].lastTill - images[nextIndex].startsAt;
    setTimeout(() => {
        applyImg(nextIndex);
    }, nextInterval * 60 * 60 * 1000);
}


function getCurrentInterval() {
    const hours = new Date().getHours();

    if (hours >= 9 && hours < 14) {
        return 0;
    }

    if (hours >= 14 && hours < 17) {
        return 1;
    }

    if (hours >= 17 && hours < 18) {
        return 2;
    }

    if (hours >= 18 && hours < 19) {
        return 3;
    }

    if (hours >= 19 && hours <= 23) {
        return 4;
    }

    return 0;
}

const cuIn = getCurrentInterval();
applyImg(cuIn);

Thank you SO much for what looks like a wall of considerate and well reasoned code. Starting to pick up and understand how const operates after reading this. It's weird to say that this still didn't work for me although being helpful in every other way. Filled in my file paths and anything else that is should have been accommodated, yet it all fails to display. Should I be doing anything more than that outside of placing the final product in the index.html body? And of course adding script tags. — www, Feb 28 '20 at 09:22

Javascript: Issues understanding how to display Images based on time (new Date(), getHours(), getMinutes() )

2 Answers2