Форум

Spawnets · #1 (**permalink**) 14.01.2019, 10:23

Подскажите, как подключать разные картинки в зимнее и летнее время автоматически. Есть ли такой скрипт, или может это будет php код? И есть ли у кого-то опыт работы с такой задачей, то поделитесь, пожалуйста.

laimas · #2 (**permalink**) 14.01.2019, 11:09

Какие картинки? Все можно, можно распределить их по папкам соответственно сезону, названия которых описаны в массиве, индекс которых, это деление по модулю 3 номера месяца. Таким образом определили путь.

hfts_rider · #3 (**permalink**) 14.01.2019, 17:20

При заходе на страницу вам нужно взять индекс текущего месяца:

var currentMoth = new Date().getMonth();

метод getMonth возвращает число от 0 до 11, 0 это Январь
Дальше вам нужно проверить какой на данный момент сезон:
Например создать объект seasons:

var seasons = {
  winter: [11, 0, 1],
  spring: [2, 3, 4],
  summer: [5, 6, 7]
  autumn: [8, 9 , 10]
}

дальше пробегаться по нему и проверять какой из ключей включает индекс нужной поры и записать его в currentSeason;

в папке images/ должно лежать 4 картинки с названиями winter.jpg, spring.jpg, summer.jpg, autumn.jpg

дальше осталось только подставить на фон или в картинкy
element.src = 'images/' + currentSeason + '.jpg';
или
element.style.background = 'url(images/' + currentSeason + '.jpg)';

Malleys · #4 (**permalink**) 14.01.2019, 17:36

Сообщение от hfts_rider

дальше пробегаться по нему и проверять какой из ключей включает индекс нужной поры и записать его в currentSeason

вместо готового currentSeason можно вычислить номер сезона, а далее можно на основе его определить название, цвет, картинку, символы ☃ 🌱 🏖 🍂 и т. д.

var month = 1 + new Date().getMonth();
var season = Math.floor(month % 12 / 3);

Пример

<body>
<style>
	
html, body { display: flex; height: 100%; width: 100%; margin: 0; }

.⛅ {
	font: 12.5em Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji;
	margin: auto;
}

</style>
<script>
		
var month = 1 + new Date().getMonth();
var season = Math.floor(month % 12 / 3);

// пример использования
var seasonName = ["winter", "spring", "summer", "fall"][season];
var seasonEmoji = ["&#9731;", "&#127793;", "&#127958;", "&#127810;"][season];
var seasonColor = ["#f0f8ff", "#f1fff0", "#fefff0", "#fff4f0"][season];
var seasonPic = "pics/" + seasonName + ".jpg";

document.body.style.backgroundColor = seasonColor;
document.write('<p class="⛅">' + seasonEmoji + '</p>');
		
</script>

laimas · #5 (**permalink**) 14.01.2019, 20:42

Ребятки, сервер все это должен делать, ибо это должно работать по такому же принципу как темы на сайтах - есть 4 каталога, в котором одинаковые имена файлов стилей, для него же и изображения для этих стилей, а также изображения используемые страницами непосредственно, без стилей, с теми же именами. Менять надо каталог подключения файла стиля, и изображений.

<?php
$season = explode(' ', 'winter spring summer autumn')[intval((date('n')%12)/3)];
?>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?=$season?>/file.css" />
... и т.д.

Malleys · #6 (**permalink**) 14.01.2019, 20:57

Это не стоит того, это элементарная задача, и она не стоит того, чтобы заводить сторонний сервис, который будет что-то вычислять, что можно в приложении подсчитать!

laimas · #7 (**permalink**) 14.01.2019, 21:05

Сообщение от Malleys

Это не стоит того, это элементарная задача

Да что вы говорите. ) Дело не в элементарности, а в подходе, и "сторонний сервис" в контексте вопроса, это просто глупость. Ну кошмар блин, то есть сервер настолько тупой, что ему вычислять что-то надо, а клиент настолько дока, что он просто готовое из недр достанет. Вы вообще представляете себе дизайн страниц с учетом года, в котором бы менялись только картинки, но при этом общий колорит нет? Я не представляю.

Не клиента это задача, если только речь не о банальности, у него есть куда важнее задачи, а html формировать, это забота сервера.

Форум

Справочник

Discord чат

Курсы javascript