Как сделать счетчик на js
Обновлено: 08.07.2024
Таймер и есть обратный отсчет времени! Обратный отсчет сделаем в секундах, что такое таймер, обратный таймер. Скрипт таймера, пример работы и конечно же можно будет скачать полностью рабочий скрипт данного таймера!
01.11.2020
Вообще, если честно, то таймер и есть понятие, которое и включает в себя обратный отсчет! Таймер = обратный отсчет.
А вот таймер, который считает вперед называется таймер реального времени! Ну, с определениями закончили!
И первый таймер, который сработал вы уже видели! Где показывается информация, что после загрузки страницы прошло 5 секунд!
Таймер javascript с запуском отсчета по нажатию кнопки.
Мы изменим привычных вещей и в первом пункте поставим пример работы скрипта обратного отсчета в секундах! Для запуска данного таймера, нужно нажать кнопку Начать отсчет времени , конечно же можно не использовать вывод поля, что время закончилось, это очень просто настраивается в скрипте!
Скрипт таймера обратного отсчета времени с кнопкой
Отправим по нажатию на кнопку число 5 - время через которое кончится отчет.
Начать отсчет времени
И напишем коротенький скрипт, который и будет обрабатывать -что у нас есть в "show_2".
Логика скрипта таймера на javascript:
Пока в переменной(peremennaya) ничего нет - ничего не происходит. нажимаем кнопку запустить - отправляем 5 секунд
Обновляем каждую секунду. и как только получаем значение переменной(peremennaya) отнимаем от неё единицу.
Пока переменная не равно нулю - процесс продолжается.
Как только переменная равна нулю выводим - время кончилось и отправляем в "show_2" - stop timer
Если в "show_2" - stop timer - ничего не делаем.
if(peremennaya !== 'stop timer' )
peremennaya = peremennaya - 1;
alert("Время кончилось!"); document.getElementById("show_2").innerHTML = 'stop timer';
Готовый код таймера на javascript
Если вам требуется любое другое время, установить для таймера, то в коде в строке с innerHTML = 5 меняем число на то, через сколько ваш таймер должен срабатывать.
Теперь соберем весь код таймера в одном месте:
Начать отсчет времени
Запуск таймера после загрузки страницы javascript
Описание скрипта : запуск таймера после загрузки страницы javascript
Все методы для Date() можно взять отсюда.
Не буду заново рассказывать код, который мы в прошлый раз сделали.
Приведу лишь его код:
var data = new Date();
var time = data.getHours() + ":" + data.getMinutes() + ":" + data.getSeconds();
Внутри функции нужно сделать условие такого вида:
Вы наверное обратили внимание, что к минутам мы прибавили единицу. Это как раз и будет наша минута.
и надо на нее повесить счётчик чтоб значение количества нажатий выводил в консоль.
на просторах интернета нашел пример:
описание кнопки заданно как :
а сам скрипт задан кодом:
не могу переделать под свои нужды. попробовал вот так вот и выполнить в консоли браузера, но ничего не получается.
пробовал выполнить в расширении Tampermonkey (желательно что работало в Tampermonkey), но все равно не работает.
Button.onclick - как повесить на кнопку последовательные события?
Привет, есть вот такой код. Тут 5 блоков (стили в отдельном css файле). Задача, поменять цвет.
JavaScript+JQuery! Как повесить функцию обновления страницы на эту же нажатую кнопку, которая имеет другую функцию?
я понимаю что звучит очень странно, НО! по пунктам: 1. есть кнопка С функцией А 2. при нажатии на.
Поставить счетчик, сколько раз нажали на эту кнопку
Я начинающий программист на javascript опыта почти не имею. Создал сайт на html и хочу поставить .
вставил и в расширение и в консоль хрома, в консоли хрома выдал ошибку.
document.querySelector('div .btn').addEventListener("click", () => < правильно ли я понимаю эту строчку, в документе ищем значение "кнопка" внутри "div" . и при выполнении действия "click" что то делаем . не очень понятна вот эта вещь. я так понимаю это так кратко функция задается ?
ага понятно. это внешняя библиотека, но как ее подключить в расширении для браузера я не нашел. поможете ? я просто недавно нчал разбираться во всем этом )
Решение
оооо да, работает с первого раза )спасибо )
а еще такой вопрос тогда, если не сложно ?)
есть массив радиобоксов :
надо узнать какой из них выбран. нашел код на просторах интерента. и надо в отдельнотси считать каждый радиобокс при нажатии на кнопку ( счёт по которой идет. )
нашел код выглядит так:
var rad=document.getElementsByName('r1'); - в этой строке ошибка
У твоего input в атрибуте name стоит status
А в JS ты пишешь r1.
То есть в итоге у тебя должна получиться строчка
Ну а так, если у тебя несколько чекбоксов с классом amber-radio__control,то я бы лучше заменил на вот эту строчку
а эта строка создает массив и с ним надо работать как с массивом ? то есть поэлементно перебирать и когда статус будет выполнен то это порядковый номер элемента который нам нужен. и тогда возвращаем номер и узнаем который из них был нажат. примерно так да работать должно ?
Да.
Только надо будет создать кнопку и повесить на неё событие клика в котором вызывается эта функция
ага попробую сегодня соединить этих двух бегемотов чтоб все заработало ) спасибо ) если что я аукну ?
Аукай, помогу, чем смогу. Только смотри чтобы твоё обучение не перешло в простой copypaste кода.
На личном опыте случалось уже.
спасибо за помощь ) В итоге получился такой код который работает как надо и как хотелось )
теперь встала другая задача, при закрытии браузера или страницы, ее перезагрузки или еще каких то факапав счётчик обнуляется. нужно чтоб он не обнулялся, а проверялся. то есть сделал 50 нажатий, закрыт браузер. через 5 мин открыл начал нажимать, а он тебе дальше считает, а не по новой. подскажите про какие функции почитать, чтоб реализовать данную задумку.
думал делать через куки. но может кто то знает более приятное решение. спасибо
итак. есть продвижения по моему скрипту
в итоге получается такой код:
в нем присутствует функция inspection. хочу делать проверку хранящихся в файле данных. мне с нее надо вернуть 3 значения: return [counter, performed, expectation];, правильно ли я понимаю, что будет возвращен массив с 3 элементами и с ними надо работать как с массивом. то есть, если я захочу сохранить их в другую переменную то надо составлять конструкцию на подобии let a = inspection [0] где будет храниться значение counter и так для 3 значений. ?
спасибо за помощь и наставления. )
и вообще как код выглядит? вроде постарался делать красиво и расписывать каждую функцию, все что можно было вынести в отдельную функцию вынес.
правильно ли я понимаю, что будет возвращен массив с 3 элементами и с ними надо работать как с массивом
Являясь часть большого проекта Примеры счетчиков, эта статья расскажет, как создать простой счетчик загрузок на чистом JavaScript, использующим локальное хранилище (Local Storage) из HTML5.
В HTML5 localStorage это термин, используемый для обозначения простой "ключ-значение" базы данных в браузере (или, если более точно, на жестком диске компьютера, планшета или смартфона, где работает браузер), к которой мы можем получить доступ из JavaScript.
Это очень простой пример, демонстрирующий счетчик, который увеличивается каждый раз, когда вы перезагружаете страницу. Так как счетчик хранится в вашем собственном браузере и связан с конкретным сайтом, который вы посетили, то его значение не зависит от того, что видят другие люди, или от того, что увидите вы, загрузив страницу с другого устройства или в другом браузере на этом же устройстве.
examples/js/counter_on_load.html
Try!
Нажмите на Try!, чтобы увидеть, как это работает (откроется в отдельном окне).
Пример содержит единственный HTML элемент div , который имеет уникальный ID counter и немного JavaScript. Метод getItem из класса localStorage запросит текущее значение для полученного ключа (в этом случае 'on_load_counter') и присвоит его к n .
В первый раз, когда мы загрузим эту страницу, мы не получим значение для ключа, а вместо этого getItem вернет null .
Затем, если мы получили действительно null , мы установим наш счетчик в 0.
Затем увеличиваем счетчик n++; .
Затем используем метод setItem класса localStorage , чтобы установить значение для ключа 'on_load_counter' в то, что сейчас в n
Заключительный шаг - показ нового значения на HTML странице. document.getElementById('counter') предоставляет доступ к элементу с id counter , содержимое которого мы заменяем на значение в n.
Сброс счетчика
В следующем примере мы собираемся добавить кнопку сброса счетчика. Но для начала посмотрим кое-что другое. Если вы нажмете на Try!, в новом окне откроется другой пример (URL будет другой, но страница находится на том же самом сайте). Вы увидите счетчик на этой странице, начинающийся со значения, которое было на первой странице (в первом примере). На самом деле, если вы по очереди будете посещать эти две страницы, то увидите, что на самом деле, они ссылаются на один и тот же счетчик (на то же самое место в локальном хранилище).
examples/js/counter_on_load_reset.html
Try!
В этом примере мы добавили другой HTML элемент - button с ID reset . В коде JavaScript мы добавили функцию reset_counter , которая при вызове будет использовать метод removeItem класса localStorage , чтобы удалить пару ключ-значение из локального хранилища.
В последней строке мы снова вызываем document.getElementById('reset') , чтобы идентифицировать нашу кнопку, затем добавляем обработчик события с помощью метода addEventListener . Это заставит JavaScript вызывать функцию reset_counter каждый раз, когда переданный элемент HTML (кнопка 'reset') будет нажат.
Если вы откроете пример, нажав по ссылке Try!, то увидите счетчик и кнопку. Когда вы нажмете на кнопку, то вам покажется, что ничего не произошло. Это потому, что мы не обновили страницу после сброса счетчика. Единственная вещь, которая на самом деле произошла - мы удалили пару ключ-значение из локального хранилища.
Если вам хочется поиграться с этим примером, тогда добавьте немного кода, который будет автоматически обновлять значение счетчика на новое после нажатия кнопки сброса.
В статье рассказывается, как создать таймер на сайт, используя только HTML, CSS и JavaScript. Вот что мы хотим получить:
Основные функции таймера:
- Отображение оставшегося времени.
- Преобразование времени в формат MM:SS.
- Изменение цвета, когда оставшееся время приближается к нулю.
- Отображение оставшегося времени в виде анимированного кольца.
Шаг 1. Начните с базовой разметки и стилей
Далее используем CSS, чтобы:
- Установить размер таймера обратного отсчета.
- Удалить заливку и обводку из элемента круга.
- Установить ширину и цвет кольца.
В результате мы получили шаблон, который выглядит следующим образом.
Шаг 2. Настройка временной метки
HTML-код содержит пустой элемент для отображения оставшегося время. Мы добавим сюда соответствующее значение в формате MM:SS с помощью метода formatTimeLeft.
После этого мы используем только что созданный метод в шаблоне.
Чтобы вывести значение внутри кольца, нужно обновить стили.
Теперь заставим таймер отсчитывать от 20 до 0.
Шаг 3: Обратный отсчет
У нас есть значение timeLimit, которое представляет собой начальное время. А также значение timePassed, которое указывает, сколько времени прошло с момента начала отсчета.
Увеличим значение timePassed на секунду и пересчитаем timeLeft с помощью функции setInterval . Для этого реализуем метод startTimer, который будет:
- Устанавливать интервал счетчика.
- Увеличивать значение timePassed каждую секунду.
- Пересчитывать значение timeLeft.
- Обновлять значение метки в шаблоне.
Сохраним ссылку на этот объект интервала в переменной timerInterval, чтобы очистить его при необходимости.
У нас есть метод, который запускает таймер обратного отсчета. С его помощью запустим таймер.
Теперь таймер отсчитывает время. Реализуем изменение цвета временной метки при различных значениях.
Шаг 4: Перекрываем кольцо таймера другим кольцом
Чтобы визуализировать отсчет времени, добавим к кольцу второй слой, который будет обрабатывать анимацию. Для этого расположим новое зеленое кольцо поверх оригинального, чтобы получился своего рода индикатор выполнения.
Сначала добавим элемент path в SVG.
После этого добавим несколько стилей, чтобы круговая траектория выглядела как оригинальное серое кольцо. Важно, чтобы свойство stroke-width принимало значение, равное размеру исходного кольца. А также чтобы длительность transition была установлена на 1 секунду.
Но кольцо таймера пока не анимируется.
Для анимации линии оставшегося времени мы будем использовать свойство stroke-dasharray.
Шаг 5. Анимация кольца прогресса
Посмотрим, как будет выглядеть кольцо с различными значениями stroke-dasharray.
Свойство stroke-dasharray делит оставшееся кольцо времени на отрезки равной длины. Это происходит, когда мы задаем stroke-dasharray число от 0 до 9.
Посмотрим, как это свойство будет себя вести, если передать ему два значения: 10 и 30.
stroke-dasharray: 10 30
Это устанавливает длину первой секции (оставшегося времени) на 10, а второй секции (прошедшего времени) – на 30. Мы можем использовать это в нашем таймере обратного отсчета.
Нужно, чтобы кольцо покрыло всю окружность. То есть, оставшееся время равно длине окружности кольца.
Вычислить длину дуги можно по следующей формуле:
Это значение используется при первоначальном наложении кольца.
stroke-dasharray: 283 283
Первое значение в массиве – это оставшееся время, а второе – прошедшее. Теперь нам нужно манипулировать первым значением. Вот что произойдет, когда изменяется первое значение.
Создадим метод для подсчета оставшейся доли начального времени. Еще один – для вычисления значения stroke-dasharray и обновление элемента
, представляющего оставшееся время.
Также необходимо обновлять контур каждую секунду. Для этого вызовем метод setCircleDasharray внутри timerInterval.
Но анимация отстает на 1 секунду. Когда мы достигаем 0, все еще виден кусочек кольца.
Эту проблему можно решить, постепенно уменьшая длину кольца во время обратного отсчета в методе calculateTimeFraction.
Шаг 6: Изменение цвета в определенные моменты времени
Сначала добавим два порога, которые будут указывать, когда нужно добавить цвета для каждого из состояний. Начинаем с зеленого, затем переходим к оранжевому (в качестве предупреждения), а затем к красному, когда время почти истекло.
Теперь создадим метод, который будет отвечать за проверку превышения установленного порога и изменение цвета.
Мы удаляем один класс CSS, когда таймер обратного отсчета достигает определенной точки, и добавляем вместо него другой. Объявим эти классы.
Все готово. Ниже приводится полная демо-версия:
Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, дизлайки, отклики, лайки, подписки огромное вам спасибо!
Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, дизлайки, подписки!
Читайте также: