Скрипт обратного посекундного отсчета на JavaScript
Вход Регистрация

Скрипт обратного посекундного отсчета на 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".

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


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

captcha

  #1 / Гость
03 мая 2012 / Ответить  

А таймер-то г.. унылое. Автор абсолютно не понимает как работает таймаут в js, и что нужно ориентироваться на машинное время.

  #2 / codomaza
04 мая 2012 / Ответить  

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

  #3 / freeden
04 мая 2012 / Ответить  

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

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

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

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

  #4 / Гость
05 мая 2012 / Ответить  

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

  #5 / codomaza
05 мая 2012 / Ответить  

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


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

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

  #6 / Гость
05 мая 2012 / Ответить  

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


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

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

  #7 / Гость
06 мая 2012 / Ответить  

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

  #8 / codomaza
06 мая 2012 / Ответить  

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

  #9 / Гость
26 августа 2013 / Ответить  

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

  #10 / Гость
23 июля 2015 / Ответить  

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

Вход

Зарегистрируйтесь, если нет учетной записи

Напомнить пароль
Регистрация
Напомнить пароль
Войти в личный кабинет