Смена картинки в зависимости от дня в году

Как будет выглядеть итоговый скрипт, чтобы картинка менялась в зависимости от дня в году. Т.е. все 365 дней в году (каждый день - новая картинка).

Я вот вижу есть вот такой скрипт, но там картинка меняется по времени суток (по часам). Соответственно как адаптировать по дням. (Я не программист, поэтому тяжело в этом разобраться)

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img src="" id="img_main" style="width:1024px; height:220px;">

<script>
    var images = new Array();
    images[0] = 'https://bestwomanday.ru/templates/FashionWomanv1/images/night.png';
    images[1] = 'https://bestwomanday.ru/templates/FashionWomanv1/images/morning.png';
    images[2] = 'https://bestwomanday.ru/templates/FashionWomanv1/images/afternoon.png';
    images[3] = 'https://bestwomanday.ru/templates/FashionWomanv1/images/evening.png';

    function viewImages()
    {
        var date = new Date();
        var j = date.getHours();
        var i = 0;

        if (j >= 0 && j < 6) i = 0;
        if (j >= 6 && j < 12) i = 1;
        if (j >= 12 && j < 18) i = 2;
        if (j >= 18 && j < 0) i = 3;
        document.getElementById("img_main").src = images[i];
    }

    viewImages();
    setInterval("viewImages()", 1000);

</script>

</body>
</html>


Ответы (1 шт):

Автор решения: OPTIMUS PRIME

Можно добавить нумерацию 1 - 366 в названиях картинок, чтобы не хранить массив из 366 строк. Только определить номер текущего дня и сразу вставить нужную картинку:

<img id="img_main">

/***/
document.querySelector("#img_main").src = "https://my-img-" + day_of_year() + ".png";

function day_of_year() {
  let now = new Date();
  let start = new Date(now.getFullYear(), 0, 0);
  
  console.log( now - start ); // разница в миллисекундах, от начала года до "сейчас"
  
  let one_day_ms = 24 * 60 * 60 * 1000;
  
  return Math.floor( (now - start) / one_day_ms );
}

Ну а с массивом будет так .src = images[ day_of_year() - 1 ];


→ Ссылка