Смена картинки в зависимости от дня в году
Как будет выглядеть итоговый скрипт, чтобы картинка менялась в зависимости от дня в году. Т.е. все 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 ];
- Объект Date()