Счетчик с онлайн отображением, как сделать?

от
prokoding.ru > JavaScript > Счетчик с онлайн отображением, как сделать?

Для создания счетчика с онлайн отображением на веб-странице с использованием JavaScript, мы можем воспользоваться следующим подходом:

1. Создаем HTML-разметку, где будет отображаться счетчик:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Counter</title>
</head>
<body>
<h1>Online Counter</h1>
<p>Current count: <span id="count">0</span></p>
<button id="incrementBtn">Increment</button>
<button id="decrementBtn">Decrement</button>
<script src="counter.js"></script>
</body>
</html>

2. Создаем файл JavaScript counter.js, где будет содержаться логика счетчика:

const countElement = document.getElementById('count');
const incrementBtn = document.getElementById('incrementBtn');
const decrementBtn = document.getElementById('decrementBtn');

let count = 0;

function updateCount() {
  countElement.textContent = count;
}

updateCount();

incrementBtn.addEventListener('click', () => {
  count++;
  updateCount();
});

decrementBtn.addEventListener('click', () => {
  count--;
  updateCount();
});

3. Данный скрипт подключается к HTML-странице с помощью тега <script src="counter.js"></script>, и обрабатывает события клика на кнопках увеличения и уменьшения счетчика.

При каждом клике на кнопку "Increment" счетчик увеличивается на 1, а при клике на кнопку "Decrement" - уменьшается на 1. Текущее значение счетчика отображается на странице в соответствующем элементе.

Таким образом, вы можете создать счетчик с онлайн отображением на веб-странице при помощи JavaScript.