Как сделать счетчик для сайта?
mlpro
29.11.2013 19:42 6 069 Помощь
Как сделать примитивный счетчик для сайта который
был раз в 10-15 секунд прибавлял бы по 1 цифре. Т.е. как счетчик времени
только наоборот.
Пример:
Ответы на пост (7) Написать ответ
30.11.2013 01:22
Разберетесь сами?
Как сделать счетчик для нажатий по кнопке?
Из HTML элементов понадобится кнопка и место, куда выводить значение. Например, тег
Для счётчика завести переменную. Её значение будет обновляться.
На кнопке слушать событие «click», по нему должна срабатывать функция, которая увеличит значение переменной на 1 и выведет его в HTML элемент.
Как вы начнете выполнять этот план и что именно из этого плана не понятно?
Ответ написан более трёх лет назад
Neizvest @Neizvest Автор вопроса
Как сам цикл записать, этот не работает —
var button = document.getElementById(«button»);
button.addEventListener(‘click’, function(e) for (var i = 0;;i++)
Сергей Соколов @sergiks Куратор тега JavaScript
Neizvest, при одном вызове эта функция должна увеличить счётчик только 1 раз на 1.
i надо объявить вне функции, чтобы значение сохранялось между разными вызовами.
Попробуйте так:
var button = document.getElementById("button"); var i = 0; // начальное значение button.addEventListener('click', function(e) < i = i + 1; document.getElementById("text").innerHTML = i; >);Как создать счетчик времени обратного отсчета на сайте
Узнайте, как создать простой и стильный счетчик времени обратного отсчета на вашем сайте с использованием HTML, CSS и JavaScript!
Алексей Кодов
Автор статьи
2 июня 2023 в 10:25
Создание счетчика времени обратного отсчета может быть полезным для отображения времени до начала мероприятия, запуска продукта или других важных событий на вашем сайте. В этой статье мы рассмотрим, как создать простой счетчик обратного отсчета с использованием HTML, CSS и JavaScript.
Шаг 1: Создание HTML-структуры
Для начала создадим базовую HTML-структуру для счетчика обратного отсчета. Это будет включать в себя блок для каждой единицы времени (дней, часов, минут и секунд) и соответствующие метки.
00 Дней 00 Часов 00 Минут 00 Секунд Шаг 2: Оформление счетчика с помощью CSS
Теперь добавим некоторые стили CSS, чтобы сделать счетчик обратного отсчета более привлекательным и удобочитаемым. Не стесняйтесь настроить эти стили по своему вкусу.
.countdown < display: flex; justify-content: center; font-family: 'Arial', sans-serif; >.countdown-item < margin: 0 20px; text-align: center; >.countdown-item span < display: block; font-size: 2em; >.label
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Шаг 3: Создание функционала счетчика на JavaScript
Наконец, добавим JavaScript, который будет обновлять счетчик обратного отсчета в реальном времени. Зададим дату и время, до которого будет идти отсчет, и создадим функцию updateCountdown , которая будет обновлять значения на странице.
const countdown = document.querySelector('.countdown'); const targetDate = new Date('2022-12-31T00:00:00'); function updateCountdown() < const now = new Date(); const remainingTime = targetDate - now; const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24)); const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); document.getElementById('days').innerText = days.toString().padStart(2, '0'); document.getElementById('hours').innerText = hours.toString().padStart(2, '0'); document.getElementById('minutes').innerText = minutes.toString().padStart(2, '0'); document.getElementById('seconds').innerText = seconds.toString().padStart(2, '0'); >// Обновляем счетчик каждую секунду setInterval(updateCountdown, 1000);
Теперь у вас есть работающий счетчик обратного отсчета на вашем сайте! �� Не забудьте заменить значение targetDate на желаемую дату и время.
Не стесняйтесь экспериментировать и добавлять дополнительные функции, такие как проверка на окончание отсчета или добавление событий, которые происходят после завершения отсчета. Удачи!
Счетчик на js по кликам?
Есть ли такая возможность сделать оптимально счетчик товара, к примеру есть счетчик и две кнопки (- 1 +) когда нажимаешь + число увеличивается, нажимаешь — уменьшается, минимальное число 1 максимальное 4, при этом когда на счетчике число меняется оно меняется еще в одном месте, а также число счетчика умножается на определенное число и тоже меняется. Короче что бы было понятнее вот скрины) 
- Вопрос задан более трёх лет назад
- 16438 просмотров
Комментировать
Решения вопроса 2
Junior Frontend Developer
Находишь кнопку в коде и задаёшь id (атрибут «id=»твой любой id»)
В js с помощью getElementById(«твой id кнопки») добавляешь кнопку в переменную. Точно также делаешь с цифрой которая меняется.
Пример (Updated):
1 150 // 150 просто число для наглядности вычисления
JavaScript:
let calculate = document.getElementById("calculation"); let count = document.getElementById("buttonCountNumber"); calculation = document.getElementById("calculation").innerHTML; document.getElementById("buttonCountPlus").onclick = function() < let countPlus = count.innerHTML; if(+countPlus > document.getElementById("buttonCountMinus").onclick = function() < let countMinus = count.innerHTML; if(+countMinus >= 2) < count.innerHTML--; let countMinus = count.innerHTML; calculate.innerHTML = calculations(countMinus) ; >> calculations = (count) => < return calculation+` * $= ` + (+count)*(+calculation); >
Ответ написан более трёх лет назад
Нравится 3 9 комментариев