Хобрук: Ваш путь к мастерству в программировании

Как лучше всего создать 24-часовой обратный отсчет, который сбрасывается, когда он достигает определенного времени дня?

Я хочу «заказать в течение x часов с доставкой на следующий день». Я предполагаю, что лучшим способом будет JS? но я не умею разбирать и редактировать все, что я нашел до сих пор

Моя проблема в том, что все те, которые я нахожу, настроены на определенные даты, например, 5 июня 2018 года, 12:00.

По сути, я хочу, чтобы он был установлен на 17:00, а если сейчас 15:30, я не хочу, чтобы таймер говорил «заказ в течение 1 часа 30 минут для доставки на следующий день», а затем начинал с 23 часов 59 минут. 17:01.

javascript timer countdown
07.06.2017

  • Покажи нам, что ты пробовал. Получите текущее время и посмотрите, было ли оно до или после сегодняшнего дня в 17:00. Затем получите разницу во времени между сейчас и сегодня в 17:00 или сейчас и завтра в 17:00. 07.06.2017

Ответы:


1

Создайте временную метку для прибытия и временную метку на основе абсолютного расстояния до прибытия и используйте последнюю для обратного отсчета:

//Order timestamps
var arrived = new Date();
arrived.setHours(15);
arrived.setMinutes(0);
arrived.setSeconds(0);
arrived.setTime(arrived.getTime() + 86400000);
//Drawing example
var arriveNode = document.body.appendChild(document.createElement("p"));
arriveNode.innerHTML = "Arrives in: ";
var arriveNodeTime = arriveNode.appendChild(document.createElement("b"));
setInterval(function() {
  var d = new Date(Math.abs(Date.now() - arrived.getTime()));
  arriveNodeTime.innerHTML = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}, 100);

07.06.2017
  • Большое спасибо! это идеально подходит для того, что я хочу. Только одна маленькая вещь, как бы я добавил текст после таймера? поэтому я могу сделать заказ к (времени) для доставки на следующий день 07.06.2017
    • Новые материалы
    Прогресс в технологии Трансформеров часть 3
    Многомасштабный управляющий сигнальный преобразователь для бесфазного синтеза движения (arXiv) Автор: Линтао Ван , Кун Ху , Лей Бай , Юй Дин , Ваньли Оуян , Чжиюн Ван . Аннотация:..
    Представляем поддержку компонентов Vue.js. Мгновенный HMR и многое другое.
    Хотя у FuseBox уже был плагин Vue, он был базовым и не имел многих функций, которые делали работу с Vue.js такой приятной. Однако с этим выпуском мы рады сообщить, что в FuseBox..
    Приключения в Javascript, часть 1
    Я продолжаю думать о том, чтобы писать больше, но чем больше я думаю об этом, тем меньше я это делаю. Итак, сегодня я перестал думать и начал писать. Отсюда можно только спускаться… В..
    Понимание дженериков в TypeScript: подробное руководство
    Введение TypeScript, строго типизированный надмножество JavaScript, хорошо известен своей способностью улучшать масштабируемость, удобочитаемость и ремонтопригодность приложений. Одной из..
    Учебные заметки JavaScript Object Oriented Labs
    Вот моя седьмая неделя обучения программированию. После ruby ​​и его фреймворка rails я начал изучать самый популярный язык интерфейса — javascript. В отличие от ruby, javascript — это более..
    Разбор строк запроса в vue.js
    Иногда вам нужно получить данные из строк запроса, в этой статье показано, как это сделать. В жизни каждого дизайнера/разработчика наступает момент, когда им необходимо беспрепятственно..
    Предсказание моей следующей любимой книги 📚 Благодаря данным Goodreads и машинному обучению 👨‍💻
    «Если вы не любите читать, значит, вы не нашли нужную книгу». - J.K. Роулинг Эта статья сильно отличается от тех, к которым вы, возможно, привыкли . Мне очень понравилось поработать над..