«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Метод 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>

Результат

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

Отзывы и комментарии:

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

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


События
Последние заметки
Популярные заметки