Обратный отсчет js: Таймер обратного отсчёта на чистом JavaScript

Содержание

Счетчики обратного отсчёта

Описание



Пример счётчика

В манифесте блока добавьте расширение landing_countdown.

'assets' => array(
   'ext' => array('landing_countdown'),
),

В разделе block манифеста добавьте ключ:

'version' => '18.5.0'

Параметр version необязателен, но он ограничит добавления данного блока в версии ранее указанной, когда ещё не существовало нужных asset’ов.

Добавьте атрибуты для ноды-контейнера счётчика к той ноде, которая соответствует описанию и должна выполнять роль счетчика. За подробностями смотри пример.

'attrs' => array(
   '.landing-block-node-date' => array(
      'name' => Loc::getMessage('LANDING_BLOCK_51_2_COUNTDOWN_04--DATE'),
      'time' => true,
      'type' => 'date',
      'format' => 'ms',
      'attribute' => 'data-end-date',
   ),
),

Разметка

Таймер должен содержать 4 цифровых элемента, помеченных соответствующими классами:

  • js-cd-days — дни

  • js-cd-hours — часы

  • js-cd-minutes — минуты

  • js-cd-seconds — секунды

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

Цифры оборачивайте в общий контейнер, помеченный классом js-countdown. Этому же контейнеру передавайте настройки посредством дата-атрибутов.

  • data-end-date=»1586690955000″ — дата окончания таймера в формате Unix-time в миллисекундах. Т.е. полученную unix-дату нужно умножить на 1000.

  • data-days-format=»%D» — формат представления дней

  • data-hours-format=»%H» — формат представления часов

  • data-minutes-format=»%M» — формат представления минут

  • data-seconds-format=»%S» — формат представления секунд

Доступно два вариант формата:

«%S» — выводит число с лидирующими нулями «03», но «18»,
«%-S» — выводит только значимые символы «3» или «18».

Вместо «%H» можно использовать «%I» или «%-I». Это значение полного количества часов до окончания (то есть, 1 день 6 часов превращается в 30 часов). В этом случае нужно удалить data-days-format и ноду .js-cd-days.

Необязательный параметр:

data-days-expired-classes="u-countdown--days-expiried"

Когда количество дней станет равным нулю, таймер может добавить себе помечающий класс. Это поможет вам скрыть нулевое количество дней, либо как-то выделить их. Мы используем для этого класс .u-countdown—days-hide.

Пример

Примеры блоков данного типа вы можете посмотреть в нашем репозитории, воспользовавшись методами landing.block.getmanifestfile и landing.block.getrepository. Их коды:

  • 51.2.countdown_04

  • 51.3.countdown_08

  • 51.3.countdown_08_wo_bg

  • 51.4.countdown_music

  • 51.5.countdown_event

  • 51.7.countdown_13

  • 51.1.countdown_01

Пример простого таймера

<section>
   <div
       data-end-date="1555249081000"
       data-days-format="%D"
       data-hours-format="%H"
       data-minutes-format="%M"
       data-seconds-format="%S"
       data-days-expired-classes="u-countdown--days-expiried"
   >

      <div>
         <div>
            <span>12</span>
         </div>
      </div>

      <div>:</div>

      <div>
         <div>
           <span>01</span>
         </div>
      </div>

      <div>:</div>

      <div>
         <div>
            <span>52</span>
         </div>
      </div>

      <div>:</div>

      <div>
         <div>
            <span>52</span>
         </div>
      </div>

   </div>
</section>

© «Битрикс», 2001-2023, «1С-Битрикс», 2023

Наверх

Счетчик обратного отсчета • фриланс-работа для специалиста • категория Javascript ≡ Заказчик Денис Дмитриевич

5 из 5

проект завершен

  1. публикация

  2. прием ставок

  3. утверждение условий

  4. выполнение проекта

  5. проект завершен

Есть счетчик обратного отсчета, выполнен на языке javascript
В нем задается интервал времени, далее он начинает в обратном порядке отсчитывать время

Необходимо сделать так, что б каждый день в 00:00 он автоматически задавал время 24:00:00 и выполнял обратный отсчет
Сейчас после истечения времени он просто показывает 00:00:00

Высылаю код счетчика

почта: [email protected]

Отзыв заказчика о сотрудничестве с Евгением Ковалем

Счетчик обратного отсчета

Качество

Профессионализм

Стоимость

Контактность

Сроки

Спасибо за работу
Очень быстро и качественно
Рекомендую к сотрудничеству

Счетчик обратного отсчета

Оплата

Постановка задачи

Четкость требований

Контактность

Хороший заказчик. Задачу поставил четко и понятно. Рекомендую.

Евгений Коваль

Опубликовать похожий проект

Заказчик не желает делать предоплату? Оплата через Сейф поможет избежать возможного мошенничества.

  • Ставки

    6

  • Отозванные

    1

дата
онлайн
рейтинг
стоимость
время выполнения

  1. 1 день

    1 день

    Добрый день, заинтересовало ваше предложения
    Есть опыт в php, ООП,Singleton, html. css, js,jQuery, Ajax создание и работа баз данных в mysql, xml,
    выгрузки на различные порталы.
    Знание yii.
    Доработка или написание с нуля модулей или компонентов.
    Знание популярных движков WordPress, Drupal, Joomla!, так же опыт с работы и доработки самописных cms
    Скайп:
    suuds.ua

  2. 843″ data-days=»1″ data-lastactivity=»1647934231″>

    Победившая ставка1 день5 USD

    Победившая ставка1 день5 USD

    Обращайтесь.

  3. 1 день

    1 день

    сделаю быстро и качественно мой email [email protected]

  4. 1 день200 RUB

    1 день200 RUB

    Готов быстро, качественно и дешево сделать всё необходимое.
    добавляйтесь в скайп: stiffi37
    Обсудим детали сделки.

  5. 1 день20 USD

    1 день20 USD

    Есть уже готовый и проверенный скрипт, смогу поставить к вам!

  6. 1 день5 USD

    1 день5 USD

    5 баксов, 30 минут.

  1.  фрилансер больше не работает на сервисе

9 лет назад

366 просмотров

  • jscript

обратный отсчет-javascript · Темы GitHub · GitHub

Вот
48 публичных репозиториев
соответствует этой теме…

абхиджит465
/

Шиваратри-обратный отсчет

Звезда
13

юсуфсефазезер
/

ysCountDown.js

Звезда
12

кипяченая вода
/

обратный отсчет

Звезда
9

abhishek213-alb
/

Таймер обратного отсчета

Звезда
8

Хассантаукер
/

реагировать удивительный таймер обратного отсчета

Звезда
7

давиджанига
/

карта-обратный отсчет

Звезда
7

сясянфэн
/

обратный отсчет

Звезда
6

мшинагайнс
/

JWST-Таймер обратного отсчета

Звезда
4

АхсанФараби
/

Таймер обратного отсчета

Звезда
4

ВладимирСаенко
/

Обратный отсчет до Нового 2022 года

Звезда
3

Адемир Уилсон
/

Таймер обратного отсчета

Звезда
2

Совместная наука
/

CountMeDown

Звезда
2

ДенверКодер1
/

обратный отсчет

Спонсор

Звезда
2

ВладимирСаенко
/

Обратный отсчет до Нового 2021 года

Звезда
1

wzhqwq
/

обратный отсчетJS

Звезда
1

ЭбигейлГадамс
/

FourPeaksИнвестиции

Звезда
1

триллион подсказок
/

js-обратный отсчет-приложение

Звезда
1

бхирмбани
/

генератор обратного отсчета

Звезда
1

пардок
/

Обратный отсчет

Звезда
1

jycoding107
/

Таймер обратного отсчета

Звезда
1

Улучшить эту страницу

Добавьте описание, изображение и ссылки на
обратный отсчет-javascript
страницу темы, чтобы разработчикам было легче узнать о ней.

Курировать эту тему

Добавьте эту тему в свой репозиторий

Чтобы связать ваш репозиторий с
обратный отсчет-javascript
тему, перейдите на целевую страницу репозитория и выберите «управление темами».

Узнать больше

Создание 10-секундного обратного отсчета таймера в JavaScript [РЕШЕНО]

Содержание

Реклама

В этом руководстве показано создание 10-секундного обратного отсчета таймера с использованием функций таймера JavaScript. В нем представлен обзор функций таймера, а затем показано, как их применять для создания обратного отсчета.

Давайте начнем с функций таймера.

 

Различные функции таймера в JavaScript

Функции таймера JavaScript, такие как setTimeout() , setInterval() и setImmediate() происходят из объекта окна или глобального объекта Node. js. Они повторяют или задерживают выполнение других функций.

Например, setInterval() повторяет выполнение другой функции через указанное время (в миллисекундах).

 // создать функцию
функция а () {
  console.log("Печатать меня каждые 1 минуту")
}
// выполнение функции каждые 1000 миллисекунд.
setInterval(a, 1000)

Функция setTimeout() задерживает выполнение данной функции на минимальное время, равное указанным миллисекундам.

 // создать функцию
функция а () {
  console.log("Напечатайте меня через 3 минуты после задержки")
}
// выполнить функцию после задержки в 3000 миллисекунд.
setTimeout(a, 3000)

setImmediate() , которая гарантированно работает только в Node.js, аналогична использованию setTimeout() с 0 миллисекундами.

 функция а() {
    console.log("Вы также можете использовать setTimeout с 0 миллисекундами")
 }
 setImmediate(a)

Мы также можем запустить анонимную функцию внутри таймеров.

 setTimeout( () => { console.log("Напечатать меня после задержки в 3 минуты.") }, 3000)

Или очистить действие, инициированное таймером. Чтобы очистить время, нам нужно получить доступ к идентификатору действия, возвращаемому таймером. Например, мы могли бы остановить непрерывную печать setInterval() , сохраняя идентификатор возврата и ссылаясь на переменную внутри функции clearInterval() .

Advertisement

 // Сохраняем идентификатор функции setInterval() в переменной printId
const printId = setInterval (функция () {
  console.log("Печатать меня каждые 1 минуту")
}, 1000)
// Вы отменили действие функции setInterval(). Таким образом, вы не будете консольно регистрировать приведенное выше утверждение.
clearInterval(printId)

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

ТАКЖЕ ЧИТАЙТЕ: подробное объяснение глобальных объектов Node. js

 

Рассмотрим несколько практических примеров

Создание структуры проекта 

 mkdir timer && cd timer
touch index.html style.css script.js

Откройте каждый файл в предпочитаемом вами редакторе кода и вставьте соответствующий код в раздел примеров. Я использую Вим.

 

Пример 1. Создание 10-секундного таймера без индикатора выполнения

Вот мой index.html контент:

 

<голова>
    <мета-кодировка="UTF-8">
    
    
      10-секундный таймер

<тело>
    <основной>
        
Ваша загрузка начнется через  секунд

Мы связываем таблицу стилей

  css">

и файл скрипта

в головка секция. Используя ключевое слово defer , мы программируем файл сценария для запуска после завершения загрузки DOM.

Тело содержит основной элемент , в котором находится интерактивный абзац . Абзац, содержащий span id оставшееся время , обновляется по мере изменения 10-секундного таймера.

Контент из моего style.css :

Реклама

 body {
    цвет фона: #f7f8fc;
}
основной {
    запас: 3рем авто;
    ширина: 50%;
    выравнивание текста: по центру;
}

Мы оформляем корпус в белый цвет. Основной элемент покрывает половину ширины страницы , а его содержимое находится в центре страницы.

Контент из моего script.js :

 пусть оставшийсяTimeElement = document. querySelector("#remainingTime"),
         секунд слева = 10
const downloadTimer = setInterval(
    () => {
        если (secondsLeft <= 0) clearInterval (downloadTimer)
        оставшеесяВремяЭлемент.значение = секундыОсталось
        оставшеесяВремяЭлемент.textContent = секундыОсталось
        секунд слева - = 1
    },
1000)

Используя метод document.querySelector() , мы получаем оставшееся время и сохраните его в переменной restTimeElement . Мы также присваиваем таймеру secondsLeft значение по умолчанию 10.

ТАКЖЕ ЧИТАЙТЕ: Как использовать метод JavaScript join()? [РЕШЕНО]

Затем мы обновляем время каждые 1 секунду и прекращаем отсчет, когда оставшиеся секунды падают ниже нуля ( 0 ). В противном случае мы продолжаем уменьшать количество секунд, оставшихся после 1 секунды, при обновлении значения, хранящегося в элементе restTimeElement в файле сценария и в DOM соответственно.

Мы можем просмотреть реализацию кода, скопировав путь к текущему каталогу,

 pwd

открыв панель поиска браузера и выполнив поиск пути к скопированному файлу после добавления файла index.html .

Реклама

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

Миссия выполнена! Но можем ли мы сделать проект лучше? Да мы можем. Давайте представим индикатор выполнения, чтобы имитировать типичную среду загрузки файлов.

 

Пример 2. Создание 10-секундного таймера с индикатором выполнения

Обновите три файла следующим содержимым.

Обновлен index.html из предыдущего примера:

 

<голова>
    <мета-кодировка="UTF-8">
    
    
     css">  10-секундный таймер

<тело>
    <основной>
      
        <дел>
            <дел>

Ваша загрузка начнется через секунд

Мы вводим элемент div с классом progressBarDivParent .

 <дел>
  <дел>