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

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

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

Студворк — интернет-сервис помощи студентам
Вопрос как бы уже заложен в заголовке темы. Прохожу регистрацию на сайте, жму кнопку "Зарегистрироваться" и перехожу на страничку, на которой показывается сообщение: "Регистрация прошла успешно! Проверьте свою почту и подтвердите регистрацию. Через 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
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru