---
title: 'Создание таймера в js'
url: 'https://www.zencod.ru/gists/timer-js'
markdown: 'https://www.zencod.ru/gists/timer-js.md'
date: '2022-04-15'
description: 'Подготовка Добавим в проект новую зависимость: npm i dayjs Код Функция таймера import dayjs from "dayjs"; import customParseFormat from "dayjs/plugin/customParseFormat"; /* * Перевод миллисекунд в объект день, час, минута, секунда */ function getObjectTime(ms) { const checkNum = (num) => …'
taxonomy:
  tag:
    - js
    - tools
---

#  Создание таймера в js 

 15.04.2022 

  Содержание статьи 

## Подготовка

Добавим в проект новую зависимость:

```bash
npm i dayjs
```

## Код

### Функция таймера

```js[timer.js]
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";

/*
 * Перевод миллисекунд в объект день, час, минута, секунда
 */
function getObjectTime(ms) {
    const checkNum = (num) => {
        return num < 0 ? 0 : num;
    }

    const daysMs = ms % (24*60*60*1000);
    const hoursMs = ms % (60*60*1000);
    const minutesMs = ms % (60*1000);

    const days = checkNum(Math.floor(ms / (24*60*60*1000)));
    const hours = checkNum(Math.floor(daysMs / (60*60*1000)));
    const minutes = checkNum(Math.floor(hoursMs / (60*1000)));
    const seconds = checkNum(Math.floor(minutesMs / 1000));

    return {
        days,
        hours,
        minutes,
        seconds,
    }
}

export default function timer(selector) {
    dayjs.extend(customParseFormat);

    const dateTimer = selector.dataset.timer;
    const future = dayjs(dateTimer, "DD-MM-YYYY HH:mm Z");
    const now = dayjs(new Date());
    const diff = future.diff(now);
    const diffTime = getObjectTime(diff);

    selector.querySelector("[data-day]").innerHTML = diffTime.days.toString();
    selector.querySelector("[data-hour]").innerHTML = diffTime.hours.toString();
    selector.querySelector("[data-minutes]").innerHTML = diffTime.minutes.toString();
    selector.querySelector("[data-seconds]").innerHTML = diffTime.seconds.toString();
}
```

### Вызов таймера

```js[index.js]
import timer from "./timer.js";

const dateTimer = document.querySelector("[data-timer]");

if(dateTimer) {
    setInterval(() => timer(dateTimer), 1000);
}
```

### Шаблон

```html
<div class="timer-wrapper" data-timer="10-02-2077 10:00 +03:00">
    <div class="timer-item" data-day>00</div>
    <div class="timer-item" data-hour>00</div>
    <div class="timer-delimer">:</div>
    <div class="timer-item" data-minutes>00</div>
    <div class="timer-delimer">:</div>
    <div class="timer-item" data-seconds>00</div>
</div>
```

---

## Navigation

- Parent: [Gists](https://www.zencod.ru/gists.md)
- Previous: [Создание кнопки 'загрузить ещё' в битриксе](https://www.zencod.ru/gists/bitrix-show-more.md)
- Next: [Разрешение CORS запросов в php](https://www.zencod.ru/gists/php-cors.md)