20 января 2013
5962
анимированная кнопка на javascript

Анимированная кнопка на javascript

JavaScript
Демонстрация » Скачать »

Как то раз столкнулся с таким случаем, когда потребовалось, чтобы при нажатии кнопочки выводились в циклическом порядке какие-либо надписи на самой кнопке, предупреждающие или совершающие в последствии определенное действие. Решился этот вопрос очень просто, созданием анимированной кнопки на javascript, которая при повторном нажатии выводила надписи в заданном порядке.

 

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

 

Принцип работы построен полностью на javascript с небольшим присутствием html.

Первая часть. JavaScript. 

Как мы видим задается функция press с параметром set, далее идет условие для каждого значения от 0 до 3 с именем go, после прописывается условие при котором последнее значение 4. Затем идет повторение с начального значения 0, то есть "один, два, три, повторить,  - один, два, три, повторить".

 

<script language="JavaScript">

i = 0;

function press(set)
{

if(i == 0) set.go.value = "Один"
if(i == 1) set.go.value = "Два"
if(i == 2) set.go.value = "Три"
if(i == 3) set.go.value = "Повторить"

i++;

if(i == 4) i = 0

}

</script>

 

Вторая часть. HTML.

 

Кнопочку мы заключаем в тег form, в input задаем параметр = кнопка, имя = go, надпись на кнопке = нажми! и ставим обработчик функции onClick="press(this.form)".

 

<form>
<input type='button' name='go' value="Нажми!" onClick="press(this.form)">
</form>

 

Вывод:

Мы получили анимированную кнопку на javascript, способная менять надписи в циклическом порядке. В применении может задействована, допустим в организационной последовательности лайков "Нормально, Хорошо, Отлично".