Javascript: проблемы с пониманием того, как отображать изображения в зависимости от времени (new Date (), getHours (), getMinutes ()) - PullRequest
Новая
       41

Javascript: проблемы с пониманием того, как отображать изображения в зависимости от времени (new Date (), getHours (), getMinutes ())

0 голосов
/ 28 февраля 2020

Я создаю интерактивные "веб-обои", используя метко названный Wallpaper Engine. Это был продолжающийся проект с начала февраля - и, хотя я совершенно новичок в этом, мне удалось многое сделать! Ответы на вопросы на этом сайте, W3Schools и бесчисленные учебные пособия на YouTube заслуживают благодарности. , но я врезался в стену (.... бумага?).

Текущая проблема, с которой я столкнулся, заключается в явном недостатке понимания методов "Date ()", "getHours", "getMinutes". В приведенном ниже коде я пытаюсь express, что я хочу, чтобы источник изображения изменился на другой в зависимости от того, какое сейчас время дня. Но он не работает, так как изображения не отображаются вообще.

Намерение состоит в том, что он работает как более ограниченные часы ... поэтому всегда должно быть видно какое-то "солнце" или "луна".

(Для ясности, интервалы для каждого изображения go примерно такие:

  • 9 AM - 1:59 PM = www.morningsun.png
  • 2 PM - 16:59 = www.restingsun.png
  • 17:00 - 17:30 = www.afternoon.png
  • 17:30 - 17:59 = www.daybreak.png
  • 18:00 - 20:59 = www.fullmoon.png
  • 9:00 - 00:59 = www.darkhour.png
  • 1:00 - 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

Ответы [ 2 ]

1 голос
/ 28 февраля 2020

Как правило, с такими сериями вы делаете одну из двух вещей:

  1. Если вы можете превратить свои данные в уникальный ключ для каждого изображения, вы можете создать карту этого ключа для нужное изображение.
  2. Если это диапазоны, вы можете упорядочить их и использовать if / else if / else 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

Live Пример: 

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;
}
0 голосов
/ 28 февраля 2020

Вам необходимо смоделировать свое решение соответственно. Я прилагаю код для вашей помощи. Я проверил это и написал здесь только для вашей помощи. Вы можете вносить изменения и использовать его. 

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);
...