Скрипт обратного посекундного отсчета на JavaScript

В этом скрипте производится обратный посекундный отсчет от заданного количества секунд до нуля. По завершении отсчета появляется гиперссылка.

Создаем функцию и необходимые для ее работы элементы:


function countdown() {

	var sec = 60; // здесь задаем начальное число секунд
	var body = document.getElementsByTagName("body")[0];
	var divC = document.createElement('div'); // контейнер (округлой формы)
	var divS = document.createElement('div'); // секунды

Добавляем в документ созданные элементы:


	divS.innerHTML = sec;
	divC.appendChild(divS);
	body.appendChild(divC);

Создаем функцию, осуществляющую обратный отсчет:


	var a=setInterval(function() {
	sec--;
	if (sec==0) {
		divS.innerHTML="<a href=#>Click me</a>" ; // здесь можно прописать ссылку, текст и т.п.
		clearInterval(a);
	}
	else divS.innerHTML = sec;
	},1000);

Добавляем немного CSS стилей и запускаем функцию:


	divC.style.borderRadius = 100; // радиус скругления углов div'а
	divC.style.backgroundColor = "#F5F5F5"; // цвет фона окружности
	divC.style.width = 100; // ширина
	divC.style.height = 100; // высота
	divC.style.border = "solid"; // стиль рамки вокруг окружности
	divC.style.borderColor = "green"; // цвет рамки вокруг окружности
	divC.style.position = "absolute";
	divC.align = "center";

	divS.style.marginTop = 35; // отступ сверху
	divS.style.fontSize = 25; // размер шрифта
}

countdown();

Если для оформления контейнера или текста с секундами понадобится их class, то их можно установить, добавив в скрипт строки divC.className = "myCont" и divS.className = "mySec".

Теперь, соединив все части представленного кода, вы получите готовый скрипт.

23 апр. 2012 7,687 10

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

freeden
Оксана

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

, 4 мая 2012 Ответить

guest, если ты не разобрался с назначением данного скрипта, так и быть объясню: данный скрипт визуально показывает сколько времени (в данном случае секунд, хотя при желании можно и приделать минуты пару строками кода) осталось ждать до появления ссылки для закачки, как в depositfiles, или на всяких буксах типа wmmail, seosprint и т.п.

Объясняю с setTimeOut - этот метод нужен чтобы ОТЛОЖИТЬ запуск функции, пока что-нибудь другое не посчитается, пролетит или прокатится по экрану )). Но этот метод не подходит, когда нужно показать пользователю, что сервер будет готов обработать его запрос через n-ное количество секунд (тем самым показывая, что процесс идет, а не браузер "подвис").

Про привязку к машинному времени честно не понятно, зачем она в данном случае, это ж не часы в конце концов.

Как итог - в программирование надо мыслить шире, одну и туже задачу можно решать многими способами. А не тупо следовать описаниям методов в справочнике. Это мой вариант скрипта, не нравиться - напишите свой. ))

5 мая 2012 Ответить

Как его запустить??? Подскажет кто? Ну я внедрил в шапку функцию, а как на страницу вынести?

, 12 января Ответить

Это просто - складываете все части кода и помещаете в head блок html-документа, кроме последней строчки, которой запускаем выполнение скрипта - countdown();. Эту строчку пишите в теле документа (body):

<body>
<script type="text/javascript">
countdown();
</script>
</body>

Если что-то будет непонятно, пишите...

12 января Ответить

Работает, но вопрос есть, мне как бы нужно, в общем, следующее и не подсказали бы как это внедрить. Мне не нужен блок, а просто сам отсчет, и он должен работать в подгружаемой (через AJAX) страничке PHP. Типа такого: новое сообщение можно отправить только через 30 секунд (ну и оно тикает 30..29..28) Я не понимаю, как засунуть это в ту страничку т.к. у меня там так:

echo "новое сообщение можно отправить только через 30 секунд";

Подскажите пожалуйста.

6 мая 2012 Ответить

Guest, попробуйте добавить JS код в вашу страничку примерно так: "заранее предупреждаю, php я только изучаю и возможно есть более рациональные решения". Примерно так, надеюсь знатоки PHP подправят...

, 6 мая 2012 Ответить

AJAX+PHP это не одна срока кода, так что нужно видеть весь скрипт целиком, что бы понять, о чём вы вообще говорите.

26 авг. 2013 Ответить

Огромное спасибо ))) очень помог!

23 июл. 2015 Ответить

А вариант с jquery как будет выглядеть?

Что такое облачное хранилище и как им пользоваться?