Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.85/141: Рейтинг темы: голосов - 141, средняя оценка - 4.85
 Аватар для Pinnokio
0 / 0 / 0
Регистрация: 16.01.2017
Сообщений: 110

Таймер обратного отсчета для перенаправления на другую страницу

12.03.2017, 17:54. Показов 28689. Ответов 10
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Вопрос как бы уже заложен в заголовке темы. Прохожу регистрацию на сайте, жму кнопку "Зарегистрироваться" и перехожу на страничку, на которой показывается сообщение: "Регистрация прошла успешно! Проверьте свою почту и подтвердите регистрацию. Через 10 секунд вы будете перенаправлены на главную страницу."
Сейчас пока один вопрос. Как сделать так, чтобы посетитель видел не эти статичные "10 сек", а таймер в режиме реального времени, отсчитывающий секунды в обратном порядке до "0". Как только показывается "0", происходит перенаправление на главную страницу.
Сейчас пока поставил вот этот скрипт:
JavaScript Скопировано
1
2
3
4
5
<script>
    setTimeout(function() {
      document.location.href = "index.php";
    }, 10000); // Задержка 10 секунд
</script>
но аппетит, как говорится, приходит во время еды
P.S. Если решу проблемку самостоятельно, напишу.
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
12.03.2017, 17:54
Ответы с готовыми решениями:

Таймер обратного отсчета для сайта
Помогите изменить таймер http://codepen.io/rendro/pen/qazCG что стал такой

Таймер обратного отсчета
Здравствуйте. Делаю таймер, использую плагин ФлипКоунт. Вопрос: что нужно вставить в переменную t, чтоб он всегда отсчитывал время до 24...

Таймер обратного отсчета
Доброго времени суток, хочу сделать что-то вроде таймера. Есть число 10000 и 100, и хочу чтоб был обратный отсчет от 10000 до 100 к примеру...

10
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
12.03.2017, 18:13
HTML5 Скопировано
1
<p>До старта осталось <span class="time-left"></span></p>
JavaScript Скопировано
1
2
3
4
5
6
7
8
9
10
var delay = 10,
    output = document.querySelector('.time-left'),
    timer = setInterval(function() {
        output.textContent = --delay;
        if (!delay) {
            clearInterval(timer);
            window.location.href = "index.php";
        }
    }, 1000);
output.textContent = delay;
Добавлено через 10 минут
P.S. Если принципиально нужно jQuery. Пример в песочнице
JavaScript Скопировано
1
2
3
4
5
6
7
8
9
var delay = 10,
    output = $('.time-left').text(delay),
    timer = setInterval(function() {
        output.text(--delay);
        if (!delay) {
            clearInterval(timer);
            window.location.href = "index.php";
        }
    }, 1000);
1
 Аватар для Pinnokio
0 / 0 / 0
Регистрация: 16.01.2017
Сообщений: 110
12.03.2017, 19:11  [ТС]
заменил свой код JS на первый из приведенных выше, вставил в <HTML> вместо своих "10". Теперь так:
HTML5 Скопировано
1
"Регистрация прошла успешно! Проверьте свою почту и подтвердите регистрацию. Через <span class="time-left"></span> секунд вы будете перенаправлены на главную страницу."
пока не 1) отображается таймер 2) не работает перенаправление
В чем м.б. причина?

Добавлено через 6 минут
"Регистрация прошла ..." в теге <p>

Добавлено через 32 минуты
пока не работает
нашел и поставил вот это:
JavaScript Скопировано
1
2
3
4
5
6
7
8
9
10
<script>
var i = 10;//время в сек.
function time(){
 document.getElementById("time").innerHTML = i;//визуальный счетчик
 i--;//уменьшение счетчика
 if (i < 0) location.href = "index.php";//редирект
}
time();
setInterval(time, 1000);
</script>
и вот это:
HTML5 Скопировано
1
<span id="time"></span>
, но результат пока тот же. Может не в коде дело, а в чем-то еще? ( кроме головы )
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
12.03.2017, 19:15
Цитата Сообщение от Pinnokio Посмотреть сообщение
В чем м.б. причина?
В первую очередь, причину нужно искать в консоли. А консоль могла вывести ошибку типа: "TypeError: output is null". Если это так, то код ваш начинает выполняться до того, как загрузятся элементы страницы, с которыми он должен работать. Посему, или же разместите JS-код в конце страницы, или же отслеживайте загрузку DOM:
JavaScript Скопировано
1
2
3
4
5
6
7
8
9
10
11
document.addEventListener('DOMContentLoaded', function(){
    // код, который должен выполниться после загрузки DOM
}, false);
// аналоги в jQuery
$(document).ready(function(){
    
});
// или же 
$(function(){
   
});
0
 Аватар для Pinnokio
0 / 0 / 0
Регистрация: 16.01.2017
Сообщений: 110
12.03.2017, 20:28  [ТС]
подумаю на вашим последним постом, поскольку с DOM пока не знаком ( слышал звон, да не знаю где он )
сейчас вот здесь http://www.webengineer.pro/jav... javascript
нашел еще одно объяснение установки таймера обратного отсчета. Взял оттуда код JS и чуть подправил его:
JavaScript Скопировано
1
2
3
4
5
6
7
8
9
10
<script>
var i = 10;//время в сек.
function time(){
 document.getElementById("time").innerHTML = i;//визуальный счетчик
 i--;//уменьшение счетчика
 if (i < 0) location.href = "index.php";//редирект
}
time();
setInterval(time, 1000);
</script>
В html оставил все как было
HTML5 Скопировано
1
<span id="time"></span>
В тег body добавил "onLoad="time();"
Появились цифиры, но отсчет не начался. Подозреваю, что надо, чтобы произошло какое-то событие, которое запустит функцию.
Пока не знаю какое.

Добавлено через 53 минуты
Вот же бл..н! Решил задачку, поставив код после
HTML5 Скопировано
1
<span id="time"></span>
Теперь все работает. В итоге сначала вставлен html код
HTML5 Скопировано
1
2
<p>Регистрация прошла успешно! Проверьте свою почту и подтвердите регистрацию. 
Через <span id="time"></span> секунд вы будете перенаправлены на главную страницу.</p>
и только после него скрипт
JavaScript Скопировано
1
2
3
4
5
6
7
8
var i = 10;//время в сек.
function time(){
 document.getElementById("time").innerHTML = i;//визуальный счетчик
 i--;//уменьшение счетчика
 if (i < 0) location.href = "index.php";//редирект
}
time();
setInterval(time, 1000);
В обратном порядке не работает.

Добавлено через 57 секунд
Почему? Не знаю. Может кто пояснит ... так, для сведения.
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
12.03.2017, 20:39
Цитата Сообщение от Pinnokio Посмотреть сообщение
Может кто пояснит
Может я уже пояснил комментарием выше
0
 Аватар для Pinnokio
0 / 0 / 0
Регистрация: 16.01.2017
Сообщений: 110
12.03.2017, 22:06  [ТС]
может быть и да .... просто мне само объяснение так и осталось непонятно .... несколько сложновато для меня

Добавлено через 45 минут
В принципе эту тему можно закрывать.
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
12.03.2017, 23:27
Лучший ответ Сообщение было отмечено Pinnokio как решение

Решение

Цитата Сообщение от Pinnokio Посмотреть сообщение
объяснение так и осталось непонятно
Что же тут непонятного? Код в браузере загружается не одновременно, а читается постепенно сверху вниз. Как только браузер дошёл до вашего JS-кода, тот он начинает сразу выполняться. В коде у вас, например, записано: "найти на странице элемент с классом my-class", но загрузка еще не дошла до этого элемента и по сути его просто не существует еще на странице.
Если JS подключать внизу страницы, то естественно, что все элементы до этого момента уже будут прочитаны браузером. Если же JS подключать в <head>, то необходимо дать команду "отложенного выполнения". То есть, мы говорим браузеру, что JS не начинать выполнять до тех пор, пока все элементы страницы не будут загружены.
0
 Аватар для Pinnokio
0 / 0 / 0
Регистрация: 16.01.2017
Сообщений: 110
13.03.2017, 00:45  [ТС]
аааа, ну, вот теперь понятно ... Пиннокио ж! .... а как эта команда выглядит? я тогда код в head убрал бы
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
13.03.2017, 03:07
Цитата Сообщение от Pinnokio Посмотреть сообщение
а как эта команда выглядит?
Опять же, уже выше написано
0
 Аватар для Pinnokio
0 / 0 / 0
Регистрация: 16.01.2017
Сообщений: 110
13.03.2017, 22:26  [ТС]
аааа, sorry за невнимательность и thanks за участие
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
13.03.2017, 22:26
Помогаю со студенческими работами здесь

Таймер обратного отсчета
Подскажите что нужно дописать, что таймер автоматом каждые сутки в 00:00 добавлял время+1 день и опять отсчитывал 24 часа. У меня вот такой...

Таймер обратного отсчёта
У меня возникла проблема с реализацией работы таймера. Во-первых, у меня не получается перезапускать его автоматически. Во-вторых, мне...

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

Таймер обратного отсчета на JS
Добрый день! Хочу сделать таймер обратного отсчета. Время выбирается из select. Написал такой код, но он не работает, подскажите...

Таймер обратного отсчёта
Доброго времени дорогие профи! Извините буду писать так как я себе это представляю: проблема значит такая есть кнопки перехода на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
Агрегаты и сущности в DDD микросервисах
Javaican 10.04.2025
Разработка современных программных систем часто приводит на распутье: монолит или микросервисы? Даже при выборе микросервисной архитектуры многие команды сталкиваются с проблемой правильного. . .
Многопоточность в C#: Task и параллельное программирование
UnmanagedCoder 10.04.2025
Современные процессоры уже давно перестали наращивать тактовую частоту в пользу увеличения количества ядер. Это создало интересную ситуацию: разработчики, привыкшие к последовательному. . .
Линейное решение нелинейной задачи. Формулы от LM по моему решению пока не проверял. В итоговой её формуле видно её заблуждение.
Hrethgir 10.04.2025
В продолжение Эта LM дала ответ похожий на нормальный. В комментриях мой комментарий - похоже она ошиблась с выведением итоговой формулы, но остальные проверю. Assistant qwen2. 5-14b-instruct . . . .
Переменные в Python
py-thonny 10.04.2025
Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .
Многопоточность в C#: Task и асинхронные операции
UnmanagedCoder 10.04.2025
Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .
Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена).
Hrethgir 10.04.2025
В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .
Запуск контейнеров Docker на ARM64
Mr. Docker 09.04.2025
Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .
Vue SFC компонент на PHP с Fusion
Jason-Webb 09.04.2025
PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .
TypeScript vs JavaScript: Отличия и когда что использовать
Reangularity 09.04.2025
JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .
Подключение Kafka к Elasticsearch
Codd 09.04.2025
Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru
Выделить код Копировать код Сохранить код Нормальный размер Увеличенный размер