Jquery연습

스탑워치

잭아저씨 2023. 6. 7. 15:12

시작 전 화면
일시 정지 화면

<!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">
    <style>
        #timer {
  font-size: 40px;
  font-weight: bold;
  color: #000;
}
    </style>
    <script src="./js/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
  var interval;
  var time = 0;
  var running = false;
 
  function updateTime() {
  time += 0.01;
  var minutes = Math.floor(time / 60);
  var seconds = Math.floor(time % 60);
  var hundredths = Math.floor((time - Math.floor(time)) * 100);
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;
  hundredths = (hundredths < 10) ? "0" + hundredths : hundredths;
  if (minutes == "60") {
    $(".display").text("60:00.00");
  } else if (minutes == "00" && seconds == "00") {
    $(".display").text("00:00.00");
  } else {
    $(".display").text(minutes + ":" + seconds + "." + hundredths);
  }
}
 
  $(".start-btn").click(function() {
    if (!running) {
      running = true;
      interval = setInterval(updateTime, 10);
    }
  });
 
  $(".pause-btn").click(function() {
    if (running) {
      running = false;
      clearInterval(interval);
    }
  });
 
  $(".stop-btn").click(function() {
    if (running) {
      running = false;
      clearInterval(interval);
    }
    time = 0;
    updateTime();
  });
 
  $(".reset-btn").click(function() {
    time = 0;
    updateTime();
  });
});

    </script>
    <title>Document</title>
</head>
<body>
    <div class="stopwatch">
        <h1 class="display">00:00.00</h1>
        <button class="start-btn">Start</button>
        <button class="pause-btn">Pause</button>
        <button class="stop-btn">Stop</button>
        <button class="reset-btn">Reset</button>
      </div>
</body>
</html>