<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Мигающая кнопка JavaScript

Мигающая кнопка JavaScript

Описание: Достаточно простой скрипт, основанный на таймерах JavaScript. Всё, что он делает, так это при наведении мышки начинает переливаться цветом, а при отвода кнопки мыши от кнопки, начинается обратное действие. В общем, смотрите на результат.

Результат работы:

Наведите мышкой на кнопку.

Код javascript (вставлять между тегами <head> и </head>):

<script language = "javascript">
arrColor = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
function mouseOut() {
  for (i = 0; i < 13; i++)
    setTimeout ('document.blinkbutton.button.style.background = "#'+arrColor[15-i]+'0'+arrColor[15-i]+'FFF";', i * 50);
}
function mouseOver() {
  for (i = 0; i < 15; i++)
    setTimeout ('document.blinkbutton.button.style.background = "#'+arrColor[i]+'0'+arrColor[i]+'F31";', i * 50);
}
</script>

Код HTML (вставлять между тегами <body> и </body>):

<form name = "blinkbutton">
  <input type="button" name="button" value=" Наведи мышку " onMouseOver='mouseOver()' onMouseOut='mouseOut()' style="background-color: #1400FF">
</form>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (20):

sync.o sync.o 01.05.2011 23:04:05

Симпатичный скрипт. Жаль только, что везде, где применяются onMouseOver / onMouseOut, начинаются жуткие видеоэффекты, если мышкой водить не так аккуратно, как задумал программер)) Интересно, можно ли этого избежать?

Ответить

Natalymath Natalymath 12.06.2011 10:18:51

Мне тоже очень понравилась эта идея. К сожалению, я не умею программировать. Но проблема, мне кажется, в том, что при быстром вождении мышки начинают работать одновременно сразу две функции. Думаю, что: 1)Надо оставить одну функцию, которая начинает работать при onMouseOver; 2)После каждого шага изменения цвета должно проверяться условие, где указатель мыши. Если над кнопкой, то цикл повторяется. Если вне кнопки, то цвет должен меняться в другую сторону. Если у кого есть решение, напишите на форуме, а здесь дайте ссылку. Может быть, я и сама напишу, если изучу ява скрипт.

Ответить

sync.o sync.o 14.06.2011 14:40:23

Чтобы цвет "менялся в другую сторону", нужно его задавать по одной формуле, а тут две разные. Как вариант, можно прекращать цикл, стирая timeout. Только для этого функции нужно по-другому переписать. Попробуйте: <script language = "javascript"> arrColor = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; var tover; var tout; function mouseOut(out) { document.blinkbutton.button.style.background = '#'+arrColor[15-out]+'0'+arrColor[15-out]+'FFF'; if(out < 12) { out++; tout = setTimeout (mouseOut, out * 4, out); } } function mouseOver(over) { document.blinkbutton.button.style.background = '#'+arrColor[over]+'0'+arrColor[over]+'F31'; if (over < 15) { over++; tover = setTimeout(mouseOver, over * 4, over); } } </script> Соответственно запускаем их с параметром: <form name = "blinkbutton"> <input type="button" name="button" value=" Наведи мышку " onMouseOver='clearTimeout(tout); mouseOver(1)' onMouseOut='clearTimeout(tover); mouseOut(1)' style="background: rgb(48, 63, 255)"> </form>

Ответить

sync.o sync.o 14.06.2011 14:41:25

жаль, у Русакова переноса строки нету)

Ответить

Natalymath Natalymath 16.06.2011 09:30:20

Сева, я только вчера увидела ваш ответ, поэтому отвечаю с опозданием. Просмотрела я сегодня вашу версию скрипта - действительно, больше цвет не скачет. Просто удивительно. Вот буду теперь разбираться с кодом, т.к. пока не понимаю, как он работает.

Ответить

Natalymath Natalymath 12.06.2011 12:14:30

Подскажите, пожалуйста, как правильно записать условие if(указатель_мыши_находится_над_button=true) Условие внутри функции, которая будет внутри head

Ответить

Admin Admin 12.06.2011 13:05:41

Здесь я вижу только один вариант. Надо создать переменную flag, которой присваивать значение true, когда мышку навели на кнопку (onmouseover), а когда уводят мышку с кнопки (onmouseout), то присваивать значение false. И в условии проверять значение переменной flag.

Ответить

armen_98 armen_98 18.06.2011 21:07:07

а можно спросить каждый раз анимация происходит столько же секунд сколько и предыдущий раз.Например анимация 3 секунды а следующая тоже 3 секунды?

Ответить

armen_98 armen_98 18.06.2011 21:07:28

Если да то здесь очень легко решить эту проблему

Ответить

Admin Admin 18.06.2011 21:41:04

Да, одинаковое количество времени.

Ответить

armen_98 armen_98 18.06.2011 21:51:06

ну тогда можно при начале первой анимации создать переменную и присвоить ей значение false а потом при завершении анимации присвоить ей true.Когда пользователь захочет начать другю анимацию можно проверить если значение переменной равно false то return false; если true то return false если я обьяснил не понятно то могу написать код.

Ответить

armen_98 armen_98 18.06.2011 21:52:04

ой я не правильно написал если если true то return true a не false))

Ответить

Admin Admin 18.06.2011 21:59:04

Не получится, setTimeout() в 15 итераций просто ставится в очередь, а не выполняется. Следовательно, если после цикла поставить true, то true будет гораздо раньше, чем пройдёт даже самое первое изменение цвета.

Ответить

armen_98 armen_98 18.06.2011 22:04:22

тогда нужно написать 2 settimeout-а 1 для изменения цвета а второй для изменения значения переменной.

Ответить

armen_98 armen_98 18.06.2011 22:08:40

так получится?

Ответить

Admin Admin 18.06.2011 22:12:02

Функция settimeout() являются очень нестабильной, то есть поставив задержку 1000, не факт, что через 1 секунду будет выполнена операция. Повиснет компьютер у пользователя, и она будет выполнена через 1.5 секунды. В общем, решается эта проблема легко как-то, я подумаю попозже.

Ответить

armen_98 armen_98 21.06.2011 18:10:47

а можно спросить почему Вы там написали i * 50 просто я у меня вместо этого написал просто 50 и она не работала?

Ответить

Admin Admin 21.06.2011 19:38:44

Работает всё аналогично, просто нет плавности. А ввиду того, что 50мс * 15 - это очень быстро, вот Вы и не замечали. И Вам казалось, что цвет просто сразу менялся.

Ответить

armen_98 armen_98 22.06.2011 10:00:53

Но я потом и ставил 500.Тогда тоже так было.500мс это же уже много.

Ответить

Admin Admin 22.06.2011 13:16:07

Это связано с тем, что итерации цикла проходят очень быстро. Гораздо быстрее, чем 500 мс. В каждой итерации происходит перезапись цвета кнопки. Поэтому неудивительно, что побеждает в итоге самая последняя итерация, а другие просто не успевают сработать. Поясняю: 1. Через 500 мс цвет меняется. 2. Через 500.5мс цвет снова меняется. 3. Через 501 мс цвет снова меняется. И так далее. Поэтому в каждой итерации необходимо увеличивать время задержки. Надеюсь, понятно объяснил.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.