Таймер

@Муслим · Регистрация: 15.11.2014

Студворк — интернет-сервис помощи студентам

Есть таймер который использует только секунды.

<div class="timer">10</div>

JavaScript
1
2
3
4
5
6
7
8
$(function() {
  var $timer = $('.timer'),
    count = $timer.html(),
    setIntervalId = setInterval(function() {
      $timer.html(--count);
      if (count == 0) clearInterval(setIntervalId);
    }, 1000);
})

Подскажите пожалуйста, куда что добавить чтобы он мог использовать и минуты?

@Mr_Sergo · 23.02.2019, 06:38

Муслим,

Так можно -> https://codepen.io/Mr_Sergo/pe... itors=1000

PHP/HTML
1
2
3
4
5
6
7
8
<div class="timer">300</div>
<script>
    let timer = document.querySelector('.timer'), i = +timer.innerText,
    interval = setInterval(() => { i--;
        timer.innerText = Math.floor(i / 60) + ':' + Math.floor(i % 60 / 10) + i % 60 % 10;
        !i ? clearInterval(interval) : '';
    }, 1000);
</script>

@amr-now · 23.02.2019, 09:15

Всем здравствуйте!
В JavaScript отображение времени всегда было больной темой. Разные браузеры годами по-разному глючат при отображении времени.

Вот достаточно ровный и стабильный способ показать время с ведущими нулями:
dateObj.toTimeString() вернёт дату, отформатированную в виде человеко-читаемой строки на американском английском.

Соответственно, если время таймера отображать как обычное время, то например так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
        $(function () {
            var $timer = $('.timer'),
                start = new Date("Jan 01 2000 00:" + $timer.text()),
                end = new Date(2000, 0, 1),
                setIntervalId = setInterval(function () {
                    start.setSeconds(start.getSeconds() - 1);
                    $timer.text(start.toTimeString().slice(3,8));
                    if (start - end === 0) {
                        clearInterval(setIntervalId);
                        // Выполнить какие-то действия по истечении времени
                    }
                }, 1000);
        });

@shvyrevvg · 23.02.2019, 09:45

А почему все полагаются на то, что таймер будет срабатывать 1000мс, может все-таки правильней брать текущее время и проверять сколько прошло?

@amr-now · 23.02.2019, 10:01

shvyrevvg, к текущему времени прибавить стартовые 25 минут 31 секунду - тоже покувыркаешься.
И плюс создавать каждую секунду новый объект времени?

Добавлено через 1 минуту

Сообщение от shvyrevvg

А почему все полагаются на то, что таймер будет срабатывать 1000мс

Для отображения на экране. Предполагается, что таймер с дисплейчиком.

@Mr_Sergo · 23.02.2019, 10:04

Сообщение от shvyrevvg

почему все полагаются на то, что таймер будет срабатывать 1000мс

В коде тс-а стоит 1000мс

Сообщение от shvyrevvg

может все-таки правильней брать текущее время и проверять сколько прошло?

Вы считаете что в данном случае это необходимо? Вы посмотрите на код тс-а- там не единого намека на это.

@shvyrevvg · 23.02.2019, 10:11

Сообщение от Mr_Sergo

Вы считаете что в данном случае это необходимо? Вы посмотрите на код тс-а- там не единого намека на это.

Если это несильно усложняет код, то почему бы и нет.

@amr-now · 23.02.2019, 10:15

shvyrevvg, таймер без дисплейчика выглядит по-другому:

JavaScript
1
2
await delay(123456); //ms
// Какие-то действия по завершении отсчета времени

@Mr_Sergo · 23.02.2019, 10:36

Не по теме:

Сообщение от shvyrevvg

почему бы и нет

Кому как, мой вариант таков

@shvyrevvg · 23.02.2019, 12:29

Сообщение от amr-now

shvyrevvg, к текущему времени прибавить стартовые 25 минут 31 секунду - тоже покувыркаешься.
И плюс создавать каждую секунду новый объект времени?

amr-now, я имел ввиду как-нибудь так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var $timer = $('.timer'),
    ms = +$timer.text() * 1000,
    timer = new Date(),
    end = timer.getTime() + ms,
    remain,
    setIntervalId = setInterval(function() {
      remain = end - Date.now();
      if (remain < 0) {
        clearInterval(setIntervalId);  
        remain = 0;
      }
      timer.setTime(remain);
      $timer.text(timer.toTimeString().slice(3,8));
    }, 1000);

@amr-now · 23.02.2019, 12:55

Сообщение от Муслим

Подскажите пожалуйста, куда что добавить чтобы он мог использовать и минуты?

shvyrevvg, +$timer.text() * 1000 не прокатит. Там минуты:секунды.

@shvyrevvg · 23.02.2019, 13:29

Сообщение от amr-now

shvyrevvg, +$timer.text() * 1000 не прокатит. Там минуты:секунды.

amr-now, так может ТС в секундах будет задавать время таймера)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var $timer = $('.timer'),
    timer = new Date(),
    end = timer.getTime() + (new Date("Jan 01 2000 00:" + $timer.text()).getTime()),
    remain,
    setIntervalId = setInterval(function() {
      remain = end - Date.now();
      if (remain < 0) {
        clearInterval(setIntervalId);  
        remain = 0;
      }
      timer.setTime(remain);
      $timer.text(timer.toTimeString().slice(3,8));
    }, 1000);

@Муслим · 23.02.2019, 16:22 **[ТС]**

Сообщение от Mr_Sergo

Так можно -> https://codepen.io/Mr_Sergo/pe... itors=1000

Спасибо всем! Забрал себе этот вариант.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	23.02.2019, 09:45
	А почему все полагаются на то, что таймер будет срабатывать 1000мс, может все-таки правильней брать текущее время и проверять сколько прошло? 0

Таймер

Решение