<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

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

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

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

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

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

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

Реализация таймера в JavaScript

Реализация таймера в JavaScript

Я уже когда-то упоминал о создании таймеров в JavaScript, которые вызывают определённые действия через определённое время, но в этой статье хочется ещё раз сказать о них. Потому что я очень часто вижу их применение в Интернете, и, разумеется, многим захочется делать такие же вещи. Как раз о том, как их делать Вы и узнаете из этого материала.

Начнём с повторения двух функций setTimeout() и setInterval(), которые позволяют запустить таймер. Первая функция срабатывает через заданный промежуток времени и заканчивает свою работу. А функция setInterval() работает постоянно, то есть через равные промежутки времени вызывает определённое действие. Это было как повторение.

А теперь переходим к практике. Самая популярная задача - это часы на сайте. Думаю, многие с ними встречались. Давайте реализуем простейший вариант (простейший, потому что без графики):

<html>
<head>
<script language = 'javascript'>
  function startTime() {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    if (hours < 10) hours = "0" + hours;
    if (minutes < 10) minutes = "0" + minutes;
    if (seconds < 10) seconds = "0" + seconds;
    document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds;
    setTimeout(startTime, 1000);
  }
</script>
</head>
<body onLoad = 'startTime()'>
  <b>Время на сайте: <span id="time"></span></b>
</body>
</html>

Чтобы стало понятно, о чём идёт речь, советую данную страницу сохранить к себе и запустить в браузере. А теперь объясняю, как это работает. Начнём с функции startTime(), которая в самом начале узнаёт текущие время и дату. Затем получает отдельно часы, минуты и секунды. Дальше добавляются ведущие нули для однозначных чисел (чтобы не было, например, такого 15:1:12, а было 15:01:12). После этого внутри элемента с id = "time" появляется строка с текущим временем. И дальше идёт самое интересное: мы внутри самой функции вызываем через одну секунду её ещё раз. Всё вышесказанное вновь выполняется (но время уже на одну секунду больше), снова меняется содержимое элемента "time", затем вновь запуск через одну секунду. И, наконец, чтобы вся эта конструкция запустилась, мы при загрузке документа (событие Load и обработчик onLoad) вызываем функцию startTime(). Вот такой классический алгоритм реализации таймера.

Это был пример использования таймеров. В категории JavaScript скрипты находятся другие примеры с использованием таймеров. Причём там Вы сможете посмотреть не только код самого скрипта, но сразу увидеть и результат.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

Сорокин Сорокин 23.05.2012 00:26:09

Михаил, а как сделать его больше по размеру?

Ответить

Admin Admin 23.05.2012 00:31:04

Хотя бы так: <body style="font-size: 300%;">

Ответить

Сорокин Сорокин 23.05.2012 01:21:01

спс! А не подскажите где можно посмотреть как вставить на сайт гугл или яндекс карту?

Ответить

Admin Admin 23.05.2012 08:25:29

Посмотрите на их официальных сайтах, там должно быть всё подробно написано.

Ответить

ausik ausik 25.03.2013 19:47:02

А как с помощью таймера реализовать следующую задачу.вот,есть такой код <script language="JavaScript"> function random(img){ img.style.position = 'absolute' var top = Math.floor((Math.random()*500)+0); var left = Math.floor((Math.random()*700)+0); img.style.top = top; img.style.left = left; } </script> </head> <body> <center> <img src="1.jpg" id="img" height="150" onMouseOver="random(this)" /> </center> </body> тут картинка убегает от курсора.как сделать чтобы картинка плавно передвигалась?

Ответить

Admin Admin 25.03.2013 21:47:03

Делать в цикле, последовательно перемещая из начальной точки в конечную. Можно по прямой (y=kx + b), можно по двум перпендикулярам, сначала по x выравниваете, потом по y.

Ответить

ural@ ural@ 23.04.2013 12:38:59

Здравствуйте,помогите пожалуйста с решением задачи,который присутствует в вашем видеокурсе: "При щелчке на кнопку цвет фона должен мигнуть количество раз, заданное в текстовом поле." Спасибо огромное!

Ответить

Admin Admin 23.04.2013 13:00:29

1) Получить значение из input и записать его в глобальную переменную. 2) Создать глобальный счётчик текущего количества миганий (то есть сколько их уже было). 3) Создать функцию с таймером settimeout(), где будет происходить мигание. Так же там идёт увеличение глобального счётчика. 4) Если значение счётчика меньше глобальной переменной, вызывается settimeout(), иначе просто идёт выход из функции.

Ответить

ural@ ural@ 23.04.2013 13:18:25

Порядок выполнения я то понял. Но вот реализовать это все у меня не получается. По сути он должен мигать неограниченное количество раз(если нет ограничителя конечно), но у меня мигает два раза и всё! В чем проблема? Посмотрите пожалуйста: function color() { document.bgColor = "red"; setTimeout(color,100); setTimeout(func,100); } function func() { document.bgColor = "white"; } <form> <input type="text"> <input type="button" value="Кнопка" onclick="color();"> </form>

Ответить

Admin Admin 23.04.2013 21:27:30

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

Ответить

RussianPro RussianPro 02.05.2013 13:41:58

Может я и не прав, но это не таймер, а обычные часы! Таймер это когда часы показывают сколько времени осталось до того или иного промежутка времени.

Ответить

Frederico Frederico 23.06.2013 21:18:39

Почему <body onLoad = 'startTime()'> в валидаторе является ошибкой?

Ответить

Admin Admin 23.06.2013 21:28:53

onload напишите.

Ответить

Frederico Frederico 23.06.2013 21:33:19

Исправил, теперь все работает и валидно. Огромное спасибо!

Ответить

manai manai 20.05.2014 14:19:40

Михаил, прохожу ваш курс по js. По таймерам есть задание Выведите время, проведённое пользователем на странице в формате: mm:ss. Например, 01:15 или 02:00. То есть первые 2 цифры – это минуты, а вторые 2 цифры – это секунды. Каждую секунду время должно увеличиваться. Примечание: Обратите внимание, что если число минут или секунд меньше 10, то должен быть добавлен ведущий 0, то есть чтобы не было 01:5, а было 01:05. Подскажите пожалуйста как его реализовать? Даже не знаю с чего начать

Ответить

alexandrdante alexandrdante 20.05.2014 16:04:28

manai вопросы по курсам задавайте в службу поддержки,пожалуйста

Ответить

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