Скрипт идущего времени на jQuery

jquery time - Скрипт идущего времени на jQuery

Задача: написать скрипт, который бы выводил текущую дату и время сервера. Время должно быть «идущим», т.е. имитировать реальную работу.

Пример: https://s.devarts.pro/jquery-time.php

За основу возьмем JavaScript, а движение будем имитировать изменением секунд за одну единицу времени (т.е. с шагом +1). Инструкция ниже.

HTML код

Вся логика генерируется в скрипте. В шаблоне нужен лишь идентификатор для вставки цифр. Для этого используем пустой блок #time.

<span id="time"></span>

JavaScript

Для работы таймера необходима библиотека jQuery. Подключается следующей строкой.

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Скрипт таймера

Основная логика заключена в нескольких строка кода, а именно:

  • в начале функции clock() объявлен объект даты;
  • логическим переменным присвоены значения этого объекта;
  • немного декораций с преобразованием числового индекса месяца в буквенны, а также нулями перед однозначным числом;
  • зацикливание функции с итерацией в одну секунду функцией setInterval();

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

function clock() {

	var d = new Date();
	var day = d.getDate();
	var hrs = d.getHours();
	var min = d.getMinutes();
	var sec = d.getSeconds();

	var mnt = new Array("января", "февраля", "марта", "апреля", "мая",
	"июня", "июля", "августа", "сентября", "октября", "ноября", "декабря");

	if (day <= 9) day="0" + day;
	if (hrs <= 9) hrs="0" + hrs;
	if (min <=9 ) min="0" + min;
	if (sec <= 9) sec="0" + sec;

	$("#time").html("Сейчас: " + hrs + ":" + min + ":" + sec + "&nbsp;&nbsp;&nbsp;" + day + "-го " + mnt[d.getMonth()] + " " + d.getFullYear() + " г.");

}

setInterval("clock()",1000);

Пример: https://s.devarts.pro/jquery-time.php

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *