자바스크립트 스탑워치

조회수 77회

큐브 타이머(스탑워치)를 만들던 도중에 아무리 생각해도 모르겠어서 올립니다. 제 목표는 다음입니다!

  1. 마우스를 눌렀다 때는 순간 실행됩니다(mouseupor click).
  2. 시작되고 나서 마우스를 누르는 순간 멈춥니다.(mousedown),
  3. 멈추고 나서 마우스를 땔 때는 실행되지 않습니다. <-다른건 구현이 됬는데 이게 문제입니다...

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.4.1/font/bootstrap-icons.min.css" integrity="sha512-YBSrHBAMjFhWHodf0RF58XB/x9lmuwBtyJv1LWDHQa1nOaWNXfG3Etc/lEXfW+qBx8ne79JnzccDs59je/ccVA==" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>Cubimer</title>
</head>
<body>
  <div class="position-absolute top-50 start-50 translate-middle">
    <span class="font-big font-monospace user-select-none" id="time">0.00</span>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>
</html>

Javascript


const timeDisplay = document.getElementById("time");
var isRunning = false;
var isStopped = false;
var time = 0.00;

window.setInterval(function() {
  if (isRunning) {
    time += 0.01;
    timeDisplay.innerText = time.toFixed(2);
  }
}, 1);

window.addEventListener("mouseup", function() {
  time = 0.00;
  if (!isRunning) {
    isRunning = true;
  }
});

window.addEventListener("mousedown", function() {
  if (isRunning) {
    isRunning = false;
  }
});
  • 한 번만 실행하는 거라면 초기 실행을 판단할 키값을 하나 만드는건 어떨까요? 초보 2021.4.28 16:40

1 답변

  • 좋아요

    1

    싫어요
    채택 취소하기

    시작과 정지 동작의 이벤트를 꼭 나눠야 한다면 아래처럼 하면 될 것 같아요.

          window.addEventListener("mouseup", function () {
            if (justStopped) {
              justStopped = false;
              return;
            }
    
            time = 0.0;
            if (!isRunning) {
              isRunning = true;
            }
          });
    
          window.addEventListener("mousedown", function () {
            if (isRunning) {
              isRunning = false;
              justStopped = true;
            }
          });
    

    그런데 저라면 이렇게 할 것 같아요.

          var startTime;
          var isRunning2 = false;
          var time2El = document.getElementById('time2');
          window.addEventListener('click', () => {
            if (isRunning2) {
              isRunning2 = false;
            } else {
              startTime = new Date().getTime();
              isRunning2 = true;
            }
          });
    
          function drawTime() {
            if (isRunning2) {
              var time = ((new Date().getTime() - startTime) / 1000).toFixed(2);
              time2El.innerText = time;
            }
            requestAnimationFrame(drawTime);
          }
          drawTime();
    

    왜냐면

    1. 이벤트를 나눠서 불필요한 상태(justStopped)가 필요해지고
    2. setInterval 은 정확한 간격을 보장하지 않아서 시간이 정확하지 않기 때문입니다.

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.