Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.01.2019, 10:23
Новичок на форуме
Отправить личное сообщение для Spawnets Посмотреть профиль Найти все сообщения от Spawnets
 
Регистрация: 05.10.2018
Сообщений: 2

Автоматическое переключение картинок в зависимости от времени года (от месяца и тд.)
Подскажите, как подключать разные картинки в зимнее и летнее время автоматически. Есть ли такой скрипт, или может это будет php код? И есть ли у кого-то опыт работы с такой задачей, то поделитесь, пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 14.01.2019, 11:09
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 9,961

Какие картинки? Все можно, можно распределить их по папкам соответственно сезону, названия которых описаны в массиве, индекс которых, это деление по модулю 3 номера месяца. Таким образом определили путь.
Ответить с цитированием
  #3 (permalink)  
Старый 14.01.2019, 17:20
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

При заходе на страницу вам нужно взять индекс текущего месяца:
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)';

Последний раз редактировалось hfts_rider, 14.01.2019 в 17:23.
Ответить с цитированием
  #4 (permalink)  
Старый 14.01.2019, 17:36
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 542

Сообщение от 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>

Последний раз редактировалось Malleys, 14.01.2019 в 18:29.
Ответить с цитированием
  #5 (permalink)  
Старый 14.01.2019, 20:42
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 9,961

Ребятки, сервер все это должен делать, ибо это должно работать по такому же принципу как темы на сайтах - есть 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" />
... и т.д.

Последний раз редактировалось laimas, 14.01.2019 в 20:46.
Ответить с цитированием
  #6 (permalink)  
Старый 14.01.2019, 20:57
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 542

Это не стоит того, это элементарная задача, и она не стоит того, чтобы заводить сторонний сервис, который будет что-то вычислять, что можно в приложении подсчитать!
Ответить с цитированием
  #7 (permalink)  
Старый 14.01.2019, 21:05
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 9,961

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разное количество картинок в зависимости от ширины окна Vl@dimir Элементы интерфейса 0 15.02.2017 09:07
В зависимости от локального времени меняется задний фон Tchort Events/DOM/Window 3 09.08.2011 18:21
Смена картинок в зависимости от положения курсора мыши antonio_vrn Events/DOM/Window 3 31.05.2011 22:07
Скрипт смены картинок на каждый день года Артемий Б Работа 17 02.12.2010 22:49
сделать плавное переключение картинок asker Библиотеки/Тулкиты/Фреймворки 2 11.09.2010 18:15