0

Всем привет. Нужно нарисовать счётчик - просто цифру 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>

2 ответа 2

1

Посмотрите, как работают таймеры, как их задавать и выключать: 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>

0

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>

3
  • Можете пожалуйста объяснить зачем эта проверка if (timer) { clearInterval(timer); } в mouseover?
    – EzioMercer
    7 апр 2022 в 12:59
  • Чтобы каким-то магическим образом не запустилось два таймера, хотя можно и просто return думаю. 7 апр 2022 в 13:01
  • Думаю эту проверку можно спокойно убирать :)
    – EzioMercer
    7 апр 2022 в 13:04

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.