Форум

SV4 · #1 (**permalink**) 08.04.2016, 20:00

Доброго времени суток!
Возникла такая нестандартная задача:
Есть две картинки
1) red.gif
2) green.gif.

Обе картинки в виде небольших иконок.
Первая картинка red.gif
расположена на странице в нескольких экземплярах.

Вопрос:
Как заменить все картинки red.gif на картинки green.gif
в начале каждого часа (на первые пять минут), а затем вернуть
картинки red.gif обратно.

рони · #2 (**permalink**) 08.04.2016, 20:46

SV4,
ваши попытки где?

SV4 · #3 (**permalink**) 08.04.2016, 21:08

Подскажите какую функцию юзать.
Я php изучал, с яваскрипт пока хромаю.

рони · #4 (**permalink**) 08.04.2016, 21:16

SV4,
http://javascript.ru/date
http://javascript.ru/settimeout
https://learn.javascript.ru/attribut...tom-properties

SV4 · #5 (**permalink**) 09.04.2016, 05:56

Отлично! Будем пробовать!

SV4 · #6 (**permalink**) 17.04.2016, 10:10

Пришлось юзать не только date, settimeout, Атрибуты и DOM-свойства,
но и изучить как писать пользовательские функции, создавать переменные, создавать циклы и тд....

Скрипт реально состоит из четырех строчек.

Конечно получилось намного лучше чем хотел.
В принципе javascript интересный язык. Обязательно возьму его на вооружение в свои проекты.

Форумчанам отдельная благодарность за помощь!
Только в следующий раз давайте более расширенные советы типа:
поищите в гугл
или поищите в яндекс

А то вдруг посетитель подумает что ему здесь помогут.

рони · #7 (**permalink**) 17.04.2016, 10:47

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>

SV4 · #8 (**permalink**) 17.04.2016, 15:26

А у меня такой. Тоже работает.
Не знаю правда, как здесь на форуме код активным сделать.

<!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 сек, чисто символически поставил.

рони · #9 (**permalink**) 17.04.2016, 15:53

SV4,

[HTML run][/HTML]

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Форум

Справочник

Discord чат

Курсы javascript