Как сделать счетчик на JS?

Question

Всем привет. Нужно нарисовать счётчик - просто цифру 0, запуск счётчика по наведению, при уходе элемента счётчик останавливается, при наведении еще раз продолжается. Пробовал через цикл, setTimout() и setInterval(), но не получилось. Подскажите, как это можно сделать?

function func1() {    
    let val = Number(this.innerHTML);
    val+=1;
    this.innerHTML = val;
}

let s = document.getElementById('timer');
s.addEventListener('mouseover', func1);

#timer {
    width: 100px;
    height: 50px;
    border: 2px solid black;
    margin: 10px;
    align-items: center;
    font-size: 23px;
}

<!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">
    <link rel="stylesheet" href="styles1.css">
    <title>Document</title>
</head>
<body>
    <div id="timer">0</div>
    <script src="./script1.js"></script>
</body>
</html>

Answer 1

let timer;
const s = document.getElementById('timer');
s.addEventListener('mouseover', () =>
{
  if (timer)
  {
    clearInterval(timer);
  }
  
  timer = setInterval(() =>
  {
    s.textContent = parseInt(s.textContent) + 1;
  }, 100)
});

s.addEventListener('mouseleave', () =>
{
  if (timer)
  {
    clearInterval(timer);
  }
});

#timer {
    width: 100px;
    height: 50px;
    border: 2px solid black;
    margin: 10px;
    align-items: center;
    font-size: 23px;
}

<!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">
    <link rel="stylesheet" href="styles1.css">
    <title>Document</title>
</head>
<body>
    <div id="timer">0</div>
    <script src="./script1.js"></script>
</body>
</html>

Answer 2

Посмотрите, как работают таймеры, как их задавать и выключать: https://learn.javascript.ru/settimeout-setinterval

Вот мой работающий пример:

let s = document.getElementById('timer');
let timerId;

function startCountdown () {
  timerId = setInterval( () => {
    let val = +s.textContent + 1;
    s.textContent = val;
  }, 100);
}

function stopCountdown () {
  clearInterval(timerId);
}

s.addEventListener('mouseover', startCountdown);
s.addEventListener('mouseout', stopCountdown);

#timer {
    width: 100px;
    height: 50px;
    border: 2px solid black;
    margin: 10px;
    align-items: center;
    font-size: 23px;
}

<!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">
    <link rel="stylesheet" href="styles1.css">
    <title>Document</title>
</head>
<body>
    <div id="timer">0</div>
    <script src="./script1.js"></script>
</body>
</html>

БЛОГ НА HUSL

Как сделать счетчик на JS?

Ответы (2 шт):