Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
Свойство onmousemove - Перемещение мыши Метод setTimeout - Последовательность событий Свойства onmouseover и onmouseout – Наведение мыши

Метод setTimeout - Два и три параметра - Последовательность событий

Количество просмотров: 309

Метод setTimeout принимает два обязательных параметра и выполняет какой-либо код через заданный промежуток времени.

1-ый параметр - это код.

2-ой параметр - время в миллисекундах.

setTimeout(код,5000);

Здесь для метода setTimeout задан промежуток времени 5000 миллисекунд. То есть определенный код выполниться через 5 секунд.

Метод setTimeout - 2 параметра

/* 1. Здесь первым параметром метода setTimeout является код */
<body>
<script type="text/javascript">

document.write("Ждите 5 секунд...");

setTimeout('document.write("Вы прождали 5000 миллисекунд")',5000)

</script>
</body>

---------------------------------------------------------

/* 2. А здесь в качестве первого параметра метода setTimeout выступает функция */
<body>
<script type="text/javascript">

document.write("Ждите 5 секунд...");

function time(){
document.write("Вы прождали 5000 миллисекунд");
}
setTimeout(time,5000)

</script>
</body>

 

Обратите внимание, что оба фрагмента кода из примера приводят к одному результату.

Но нам интересен третий параметр метода setTimeout. Идем далее...

Метод setTimeout - 3 параметра - Последовательность событий

Рассмотрим ситуацию, где метод setTimeout имеет три параметра.

Для этого продолжим работать с примером из предыдущего урока и для начала напомним уловие поставленной там задачи:

На странице было ТРИ полупрозрачных изображения.

Создавался ОДИН обработчик событий для всех изображений, с помощью которого:

- при щелчке на ЛЮБОМ из изображений левой кнопкой мыши оно становилось полноценным.

Дополним условие:

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

Как раз здесь и пригодится третий параметр метода setTimeout.

<script type="text/javascript">


window.onload = back_gr;


function back_gr(){

var images = document.getElementsByTagName('img'); /* Объект images содержит все изображения и работает как массив */

for(i = 0; i < images.length; i++){
images[i].onclick = change; /* Назначаем все изображениям один обработчик */
}
}


function change(eventObj){

var images = eventObj.target; /* Cообщаем, какой элемент, т.е. какое изображение сгенерировало событие */

images.src = "img/peng_" + images.id + ".gif"/* Меняем src изображения */

setTimeout(re_blur, 2000, images); /* Через 2 сек. вызываем функцию re_blur, которой в качестве параметра передаем изображение, которое сгенерировало событие */
}

function re_blur(images){
images.src = "img/peng_" + images.id + "_blur.gif" /* Снова меняем src изображения */
}


</script>

<body>

<img src="img/peng_96_blur.gif" id='96'>
<img src=
"img/peng_64_blur.gif" id='64'>
<img src=
"img/peng_32_blur.gif" id='32'>

</body>

Итак, здесь метод setTimeout имеет три параметра. Как это работает?

  • Третьим параметром метода setTimeout является images. Эта переменная является объектом, который заключает в себе изображение, которое сгенерировало событие. То есть то, по которому щелкнули левой кнопкой мыши.

    - Напомним, что благодаря щелчку это изображение стало полноценным.

  • В методе setTimeout первым параметром является функция-обработчик re_blur, которая срабатывает через 2000 миллисекунд (две секунды), и которой передается аргумент images
  • Уже в самой функции re_blur через параметр images для нужного изображения мы снова меняем атрибут src. Изображение снова становиться ПОЛУПРОЗРАЧНЫМ, т.е. возвращается к исходному состоянию.

Следует обратить внимание

Вернемся к только что рассмотренному примеру с методом setTimeout. Обратите внимание на следующие элементы кода:

images из функции back_gr(),
images из функции change() и
images из функции re_blur()

Что если использовать для них различные имена? images, imag и im
См. пример ниже...

<script type="text/javascript">


window.onload = back_gr;


function back_gr(){

var images = document.getElementsByTagName('img');

for(i = 0; i < images.length; i++){
images[i].onclick = change;
}
}


function change(eventObj){

var imag = eventObj.target;

imag.src = "img/peng_" + imag.id + ".gif"

setTimeout(re_blur, 2000, imag);
}

function re_blur(im){
im.src = "img/peng_" + im.id + "_blur.gif"
}

</script>

<body>

<img src="img/peng_96_blur.gif" id='96'>
<img src=
"img/peng_64_blur.gif" id='64'>
<img src=
"img/peng_32_blur.gif" id='32'>

</body>

Осмыслите этот момент самостоятельно...

Частота просмотра уроков
JavaScript
Дизайн сайтов
Свойство onmousemove - Перемещение мыши Метод setTimeout - Последовательность событий Свойства onmouseover и onmouseout – Наведение мыши

Ваши комментарии:

Комментариев нет...

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru