Как взять значение из URL и запустить отсчёт от значения этого число до 0 (c помощью JS)?

Question

[ThomasScott]

Помогите пожалуйста разобраться с задачей !

в поле input задаем число
нажимаем кнопку "Send number"
далее число должно браться из URL (из переменной sec)
Если такой переменной нет или не является числом, автоматический задается значение sec = 5
После этого кнопка начинает отображать текст X sec, где X - число из переменной sec(число из URL).
На кнопке начинается обратный отсчет секунд.

Когда обратный отсчет дойдет до 0:
блокирует поле ввода от изменения его значения
блокирует отправку формы пользователем
изменяет текст на кнопке для отправки
запускает отправку формы.
Если до того, как время достигнет 0, пользователь сам инициирует отправку формы.
мы действуем так, как будто время достигло 0.
После отправки формы должна заново запуститься страница.

Answer 1

[Сергей Соколов]

Получить из адресной строки значение параметра sec см. URL.searchParams:

const params = (new URL(document.location)).searchParams;
const sec = Number(params.get('sec')) || 5; // или 5 по умолчанию

Для обратного отсчёта лучше не вычитать раз в секунду единицу из счётчика, а сразу отметить момент в будущем, до которого в любой момент времени показывать оставшиеся секунды:

const future = new Date();
future.setTime(future.getTime() + 1000 * sec);

Запустите таймер раз, скажем, в 200мс, и смотрите, сколько там осталось времени до момента future.

const update = () => {
  const diff = future.getTime() - Date.now(); // сколько осталось, в миллисекундах
  const secondsLeft = Math.round(diff / 1000); // сколько осталось секунд
  if (diff <= 0) {
    // время прошло
  } else {
    // обновить в кнопке число оставшихся секунд
    // и вызвать это обновление снова через чуть-чуть:
    setTimeout(update, 200);
  }
}

update();

Comments

[ThomasScott]

Сергей Соколов Спасибо за ответ.
Подскажите пожалуйста как в React привязать все эти действия к кнопке ?

<Button id="sendNumber" className="btn btn-primary btn-block" type="submit" disabled={!this.state.formValid}>Send nubmer</Button>

[Сергей Соколов]

ThomasScott, https://reactjs.org/docs/handling-events.html