Сменить одну картинку на другую в начале часа.
Доброго времени суток!
Возникла такая нестандартная задача: Есть две картинки 1) red.gif 2) green.gif. Обе картинки в виде небольших иконок. Первая картинка red.gif расположена на странице в нескольких экземплярах. Вопрос: Как заменить все картинки red.gif на картинки green.gif в начале каждого часа (на первые пять минут), а затем вернуть картинки red.gif обратно. |
SV4,
ваши попытки где? |
Подскажите какую функцию юзать.
Я php изучал, с яваскрипт пока хромаю.:write: |
|
Отлично! Будем пробовать!
|
Пришлось юзать не только date, settimeout, Атрибуты и DOM-свойства,
но и изучить как писать пользовательские функции, создавать переменные, создавать циклы и тд.... Скрипт реально состоит из четырех строчек. :-E Конечно получилось намного лучше чем хотел. В принципе javascript интересный язык. Обязательно возьму его на вооружение в свои проекты. Форумчанам отдельная благодарность за помощь! Только в следующий раз давайте более расширенные советы типа: поищите в гугл или поищите в яндекс А то вдруг посетитель подумает что ему здесь помогут. |
смена картинок на первые пять минут в начале часа
SV4,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</script>
<script>
window.addEventListener("DOMContentLoaded", function() {
var img = document.querySelectorAll(".red"),
src = ["http://www.fotoshans.ru/upload/iblock/093/09352096e4184d4bbc657a50573cab38.jpg",
"http://www.fotoshans.ru/upload/iblock/162/16205ec9be50d5be620bb985857e6ba7.png"],
minutes = 5;
requestAnimationFrame(function e() {
var url = src[+((new Date).getMinutes() < minutes)];
[].forEach.call(img, function(el) {
el.src = url
});
requestAnimationFrame(e)
})
});
</script>
</head>
<body>
<img src="" alt="" class="red">
<img src="" alt="" class="red">
<img src="" alt="" class="red">
<img src="" alt="" class="red">
<img src="" alt="" class="red">
</body>
</html>
|
А у меня такой. Тоже работает.
Не знаю правда, как здесь на форуме код активным сделать.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<script type="text/javascript">
window.onload = function(){
(function(){
NewImg = new Image();
NewImg.src = 'http://lnterzarabok.hut4.ru/img_miniatyry/ikonBkrans/clok_green.gif';
var date = new Date();
var minutes = date.getMinutes();
function changeImg(source) { document.ImgClock.src = source ;};
if (minutes < 5) {changeImg('http://lnterzarabok.hut4.ru/img_miniatyry/ikonBkrans/clok_green.gif');}
else {changeImg('http://lnterzarabok.hut4.ru/img_miniatyry/ikonBkrans/clok.gif');};
window.setTimeout(arguments.callee, 12000);
})();
};
</script>
</head>
<body>
<div><img src="http://lnterzarabok.hut4.ru/img_miniatyry/ikonBkrans/clok.gif" width="25" height="25" name="ImgClock"></div>
<div><img src="http://lnterzarabok.hut4.ru/img_miniatyry/ikonBkrans/clok.gif" width="25" height="25" name="ImgClock"></div>
<div><img src="http://lnterzarabok.hut4.ru/img_miniatyry/ikonBkrans/clok.gif" width="25" height="25" name="ImgClock"></div>
</body>
</html>
Интервал 12 сек, чисто символически поставил. |
SV4,
[HTML run][/HTML] Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
| Часовой пояс GMT +3, время: 14:13. |