• Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Вопросы/ответы на тему JQuery и JScript на сайтах в uCoz » Смена картинки в зависимости от времени суток (Решения на Java Script)
Смена картинки в зависимости от времени суток
Дата: Пятница, 07.05.2010, 06:33 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Пример «Ротатора» фоновых картинок. v6. Смена фона в зависимости от времени суток.

Расписывать - особого желания нет, всё и так понятно ...

Вот код:
Quote (Java Script)
<script type="text/javascript">
<!--
function change(img)
{document.write('<div style=\"width:95%;height:200px;\"background:'+img+'\">');}
var h=(new Date()).getHours();
if (h > 23 || h <7) change('url(\/_example\/rotator\/psBg.gif);');
if (h > 6 && h < 12) change('url(\/_example\/rotator\/psBg-e.gif);');
if (h > 11 && h < 19) change('url(\/_example\/rotator\/psBg-g.gif);');
if (h > 18 && h < 24) change('url(\/_example\/rotator\/psBg-r.gif);');
//-->
</script>
<noscript>
<div style="width:95%;height:200px;background:url(/_example/rotator/psBg.gif);">Здесь располагается содержимое нового тега Div</div>
</noscript>


На вский ... вот и HTML-код:

Quote (HTML)
<body>
<script type="text/javascript">
<!--
function change(img)
{document.write('<div style=\"width:95%;height:200px;\"background:'+img+'\">');}
var h=(new Date()).getHours();
if (h > 23 || h <7) change('url(\/_example\/rotator\/psBg.gif);');
if (h > 6 && h < 12) change('url(\/_example\/rotator\/psBg-e.gif);');
if (h > 11 && h < 19) change('url(\/_example\/rotator\/psBg-g.gif);');
if (h > 18 && h < 24) change('url(\/_example\/rotator\/psBg-r.gif);');
//-->
</script>
<noscript>
<div style="width:95%;height:200px;background:url(/_example/rotator/psBg.gif);">Здесь располагается содержимое нового тега Div</div>
</noscript>Здесь располагается содержимое нового тега Div
<script type="text/javascript">
document.write('</div>');
</script>
</body>


Короче, можно так, а модно в отдельный файл ... в абсолютными ссылками на картинки ...
И подключаете его в то место, где должна оттображаться картинка ...
Примерно вот так:

Code
<script type="text/javascript" src="/путь до файла/картинка.js"></script>


Прикрепления .... (пример использования)

P.S. Кому что непонятно - всё есть в исходнике ...

По теме:
«Случайная фоновая картинка для «шапки» сайта на «информерах» (Смена фоновой картинки при обновлении страницы для uCoz ...)»
«JS смены шапки»

Прикрепления: rotator-v6.html (2.3 Kb)

 
Дата: Понедельник, 10.05.2010, 03:57 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Пример «Ротатора» картинок. v7. Смена картинки в зависимости от времени суток.

Тоже самое, только «в профиль» ...

Java Script:

Quote (Java Script)
<script type="text/javascript">
<!--
date = new Date();
a = date.getHours();
if (a > 7 && a < 21) {
document.write('<img src="/_example/rotator/logo0.jpg" width="100%" border="0" />');
} else {document.write('<img src="/_example/rotator/logo1.jpg" width="100%" border="0" />');}
//-->
</script>
<noscript>
<img src="/_example/rotator/logo0.jpg" width="100%" border="0" />
</noscript>

Опять же на «всякий» вот и HTML-код:

Code
<body>
<script type="text/javascript">
<!--
date = new Date();
a = date.getHours();
if (a > 7 && a < 21) {
document.write('<img src="/_example/rotator/logo0.jpg" width="100%" border="0" />');
} else {document.write('<img src="/_example/rotator/logo1.jpg" width="100%" border="0" />');}
//-->
</script>
<noscript>
<img src="/_example/rotator/logo0.jpg" width="100%" border="0" />
</noscript>
</body>

Всё тоже самое, что и в посте выше ...

Пример ... (прикрепление ... )

Если нужно поменять картинку - «покрутите свои часы» ... (на компе ... снизу - справа ... ) ... или - сохраните пример локально, и поиграйтесь с циферками «a > 7 && a < 21» ....

Flesh

Прикрепления: rotator-v7.html (1.9 Kb)

 
Дата: Понедельник, 10.05.2010, 04:23 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


В теже тему ...
Code
<script type="text/javascript"  
<Script Language="JavaScript">
var links = new Array("<a href= ссылка ><img src= URL картинки border=none></a>","<a href= ссылка ><img src= URL картинки border=none></a>", и так далее);
</Script>
</head>
<body>
<Script Language="JavaScript">
var los = Math.floor(Math.random() * links.length)
document.write (links[los]);
</Script>

Для ротации флешек, достаточно только изменить

Quote
<img src= URL картинки border=none>

На

Code
<embed src="флеш.swf" width=500 height=100 quality=high type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">

Flesh

 
Дата: Четверг, 03.03.2011, 04:12 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Quote (ПИВЗ)
Все бы было просто, но в моем шаблоне, шапка выставляется в СSS.

И чего?
- Вариантов - море ...

Вариант №1
Стили (в шаблон)

Code
<style type="text/css">
/* StartStyle */
<?if($HOUR$>'0' and $HOUR$<'5')?>
#city{background-image:url(/_theme/_st/img/header1.png);}
<?else?>
#city{background-image:url(/_theme/_st/img/header2.png);}
<?endif?>
/* EndStyle */
</style>

Прописываем основные моменты шапки (ширина, высота, фон по умолчанию, прочее) в стилях, а в глоб блок выносим только стили для фона, через условия. Контекстные стили имеют более высокий приоритет.
...

Вариант №2
CSS - (в таблицу CSS)

Code
<style type="text/css">
/* StartStyle */
#city{background-image:url(/_theme/_st/img/header.png);}
#city.time1{background-image:url(/_theme/_st/img/header1.png);}
#city.time2{background-image:url(/_theme/_st/img/header2.png);}
#city.time3{background-image:url(/_theme/_st/img/header3.png);}
/*И так далее ........*/
/* EndStyle */
</style>

Html
Quote
<div id="city" class="time$HOUR$">Шапка</div>

- То бишь - через ID задаём картинку “по умолчанию”, изменением класса, переопределяем стили.
Прописывать ВСЕ возможные классы не обязательно - тогда будет отображаться картинка по умолчанию.
...

Вариант №3
CSS

Code
#city{width:1120px;height:385px;background:url(/_theme/_st/img/header.png);margin:auto;}

HTML
Quote
<div id="city" style="background-image:url(/_theme/_st/img/header$HOUR$.png);">Шапка</div>

- То бишь - в стилях задаём все параметры, а контекстными стилями, переопределяем фоновую картинку.
...

...

Достаточно? - могу ещё парочку, как минимум, придумать ... )))
...

Прикрепления: 4819837.png (5.6 Kb)

 
Дата: Четверг, 03.03.2011, 04:59 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


С помощью JQ
HTML
Code
<script type="text/javascript">var bg='$HOUR$';</script>
<div id="city">Шапка</div>

Скрипт - можно во внешний файл:

Code
<script type="text/javascript">
$(function(){if(bg){$('#city').css('backgroundImage','url(/_example/bg/ext/nebo'+bg+'_bg.jpg)');};});
</script>

Или вот так, если в исходный код:
Code
<script type="text/javascript">
$(function(){$('#city').css('backgroundImage','url(/_example/bg/ext/nebo$HOUR$_bg.jpg)');});
</script>

- Должны иметь набор картинок: header0.png, header1.png, header2.png ....
......

Ещё вариант:
HTML

Code
<div class="n$HOUR$" id="city">Шапка</div>

Скрипт - можно (нужно) во внешний файл:

Code
<script type="text/javascript">
$(function(){var obj=$('#city'),img=obj.attr('class');
obj.css({backgroundImage:'url(/_example/bg/ext/nebo'+img+'_bg.jpg)'});
});
</script>

- То же самое ...
...
...

Через стили
Подключаем нужный в зависимости от времени суток:

Code
<link type="text/css" rel="StyleSheet" href="/_st/<?if($HOUR$>'0' and $HOUR$<'5')?>bg-sun.css<?else?>bg-night.css<?endif?>" />

....

Подключаем нужный каждый час:

Code
<link type="text/css" rel="StyleSheet" href="/_st/bg-$HOUR$.css" />

- Во внешних файлах - ТОЛЬКО стили для фона.

Стили для чётных/нечетных часов:

Code
<link type="text/css" rel="StyleSheet" href="/_st/<?if($HOUR$%2=1)?>bg-even.css<?else?>bg-odd.css<?endif?>" />

Меняем стили каждые три часа: - то бишь - для часов, кратным трём:

Quote
<link type="text/css" rel="StyleSheet" href="/_st/<?if('3'%3=0)?>bg-even.css<?endif?>" />

- В основную таблицу - прописываем фон по умолчанию, в дополнительную - ТОЛЬКО стили для дополнительного фона.
...


 
Дата: Среда, 03.08.2011, 17:51 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Quote (Komoff)
Не получается у меня нечего. sad Мне нужно чтобы с 6 до 22 часов таблица имела один фон, а соответственно с 22 до 6 часов другой. Фон задан в стилях, таблица имеет id. Самое простое было бы использовать $HOUR$, но он выводит время по часовому поясу заданному в настройках сайта, а мне нужно, чтобы время бралось с компьютера пользователя. Вот и не пойму как сменить стиль таблицы в зависимости от времени суток.


 
Дата: Среда, 03.08.2011, 17:58 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Quote (likbezz)
Фон задан в стилях, таблица имеет id

Оч. хорошо ... значит мы знаем что такое ID и как прописать фон ... ) ...

Всё вместе: (скрипт и html)
Code
<div id="header">Здесь располагается содержимое id "header"</div>
<script type="text/javascript">
var date=new Date(),h=date.getHours(),obj=document.getElementById('header');
if(h>6&&h<21){obj.className+=' mDay';}else{obj.className+=' mNight';}
</script>

Где:
<div id="header" /> - блок с твоей шапкой.
Остальное скрипт.
Устанавливает блоку класс: с 07 утра до 20.59 == mDay после == mNight.
...

Стили:
Code
<style type="text/css">
#header{background:url(картинка_по_умолчанию.png);}
#header.mDay{background:url(картинка_для_дня.png);}
#header.mNight{background:url(картинка_для_ночи.png);}
</style>


Стили #header.mDay{} и #header.mNight{} - не обязательны, то бишь по желанию.
Стили #header{} - по умолчанию, если JS отключён, например, или ошибка скрипта ... или ещё что ...
Стили #header.mDay{} - для “дневной” шапки, стили #header.mNight{} - для “ночной”, соответственно.
...

Скрипт добавляется после (!!!) блока «header» ...

Время считается, относительно установленного на машине (компьютере) пользователя.

Скрин:


...

Пример Скрипт смены шапки в зависимости от локального времении....
...
...

Прикрепления: 7097044.png (12.2 Kb)

 
Дата: Среда, 03.08.2011, 20:03 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline


likbezz, спасибо! Как всегда всё здорово! По-переводил время, всё работает.

Сообщение отредактировал Komoff - Среда, 03.08.2011, 23:26
 
Дата: Среда, 03.08.2011, 21:04 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Komoff,
Quote (Komoff)
т.к. он менял фон в 5 и 21 час

Ты имел в виду «с 07 утра до 20.59» ... )
....


 
Дата: Среда, 03.08.2011, 23:15 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline


likbezz, ну конечно, это я невнимательно читал, ещё и перепутал.)) Все правильно с 7, как в твоем сообщении. Извиняюсь. Удалил то сообщение, чтобы в заблуждение не вводило никого.

Сообщение отредактировал Komoff - Среда, 03.08.2011, 23:28
 
Дата: Четверг, 15.12.2011, 13:56 |
Группа: Гости





Здравствуйте понравился пример от 03.08.2011, 17:58, но я столкнулся с проблемой у меня хедер сделано таблицей 100% длинны разбитого на 3 столбца в котором разный ид с разной картинкой, как приплюсовать класс к каждому столбцу?

 
Дата: Четверг, 15.12.2011, 23:44 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Гость,
Quote (Гость)
как приплюсовать класс к каждому столбцу?

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


 
Дата: Вторник, 10.01.2012, 07:33 |
Группа: Гости





здравствуйте. нужен похожий скрип, только для смены фона всей страницы.

 
Дата: Вторник, 10.01.2012, 14:10 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Гость,
Quote (Гость)
здравствуйте. нужен похожий скрип, только для смены фона всей страницы.

Стили:
Code
<style type="text/css">
body{background:url(картинка_по_умолчанию.png);}
body.mDay{background:url(картинка_для_дня.png);}
body.mNight{background:url(картинка_для_ночи.png);}
</style>


Скрипт:
Code
<script type="text/javascript">
var date=new Date(),h=date.getHours(),obj=document.getElementsByTagName('body')[0];
if(h>6&&h<21){obj.className+=' mDay';}else{obj.className+=' mNight';}
</script>

...


 
Дата: Вторник, 20.03.2012, 04:08 |
Группа: Гости





Доброе время суток ув. знатоки срочно нужна ваша помощь мне нужен простой ротатор картинок в заданное время!
Для сайта онлайн радио cms dle...Только чтоб не зависил от времени пк а от времени сервера сайта!
Еще чтоб можно было задавать время с минутами т.е. мну нужно чтоб одна картинка появилась в 9.30 утра и стояла до 14.30 потом вторя картинка сменилась на третью в 16.30 и т. д.

Придумайте что нить что возможно!
Заранее спасибо!


 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Вопросы/ответы на тему JQuery и JScript на сайтах в uCoz » Смена картинки в зависимости от времени суток (Решения на Java Script)
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Поиск:


Мобильная версия